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整理 : darklord 
来 源 : JQUERY MOBILE 中 文 手册 


还 记得 去 年 (2010) 年 的 差不多 这 个 时 候 ， 我 还 在 半 开 玩笑 的 跟 我 的 同事 说 ，HTML5 普 及 的 
时 候 要 等 到 小 孩 都 能 下 地 打 效 油 了 。 事 实证 明 技术 的 发 展 和 普及 永远 比 我 们 想象 的 要 快 。 
jquery mobile 的 面世 ， 对 面向 智能 移动 设备 ， 和 平板 电脑 的 WEB 开 发 人 员 提 供 了 几乎 是 最 佳 
的 解决 方案 。 

他 在 优秀 的 JS 类 库 jquery 的 架构 上 ， 直 接 整 合 了 HTML 的 自 定 义 属性 的 特性 和 CSS3 的 新 特 
性 ， 为 移动 WEB 和 应 用 的 前 端 开 发 提供 了 一 整套 的 解决 方案 。 


本 手册 为 Jquery Mobile 官 方 网 站 文档 于 示例 的 全 部 内 容 ， 并 且 为 了 方便 开发 者 查询 视觉 效 
果 ， 将 实例 已 图 片 形式 均 保 存在 手册 内 。 开 始 动笔 时 jqm 为 A3 版 本 ， 在 翻译 与 整理 过 程 中 ， 

A4 版 本 发 布 ， 无 奈 又 重新 更 新 与 校对 了 一 过， 精力 有 限 并 且 时 间 上 比较 仓促 。 内 容 上 可 能 还 会 
有 疏漏， 如 发 现 错误 ，， 望 读者 见谅 并 及 时 联系 我 订正 。 


本 CHM 手 册 旨 在 帮助 广大 移动 WEB 应 用 爱好 者 以 及 开发 人 员 提 供 一 份 中 文 的 文档 于 示例 手 
册 。 部 分 内 容 参 考 了 filod. 的 中 文 在 线 文档 ， 并 且 感 谢 外 籍 同事 TY 的 友情 指导 。 
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Jquery mobiles? 2g Jquery Mobile Overview 


Jquery Mobile 的 策略 可 以 很 容易 的 概括 : 创建 一 个 项 级 的 javascript 库 ， 在 不 同 的 智能 手机 和 
桌面 电脑 的 web 浏 览 器 上 ,形成 统一 的 用 户 ui. 


要 达到 这 个 目标 最 关键 的 就 是 通过 Jquery Mobile 解 决 移动 平台 的 多 样 性 。 我 们 一 直 致 力 于 使 
Jquery 支 持 所 有 的 性 能 足够 的 和 在 市 场 占有 一 定 份额 的 移动 设 各 浏览 器 .所 以 我 们 将 手机 网 页 
浏览 器 和 桌面 浏览 器 的 Jquery 开 发 做 同等 重要 的 对 待 。 


为 了 使 设备 设备 浏览 器 能 够 广泛 地 支持 ， 应 用 Jquery Mobile 的 项 目的 所 有 页 面 都 必须 是 干净 
的 系统 化 的 html 页 面 ， 来 保证 良好 的 兼容 性 ， 在 这 些 设备 中 解析 css 和 javascript 的 过 程 中 ， 

Jquery Mobile 应 用 渐进 增强 技术 将 语义 化 的 页 面 转 化 成 富 媒体 的 浏览 体验 。 而 可 访问 性 的 问 
题 ， 比 如 WAI-ARIA， 已 经 通过 通过 框架 已 经 紧密 集成 进来 ， 以 给 屏幕 阅读 器 或 者 其 他 辅助 设 
备 〈 主 要 指 手持 设备 ) 提供 支持 。 


关键 特性 : Key features: 


1 构建 于 Jquery 的 核心 之 上 。 使 之 兼容 于 jq 的 语法 ， 对 于 开发 人 员 有 最 易 的 开发 曲线 


2 兼容 于 所 有 的 主流 移动 设备 :iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, 
Windows Mobile, bada, MeeGo . 


3 轻 量 级 压缩 后 只 12k， 对 图 片 的 依赖 程度 非常 低 ， 保 证 了 速度 
4 页 面 和 行为 均 基于 html5 标 记 的 驱动 进行 配 ， 开 发 效率 高 ， 对 脚本 的 需求 小 


5 渐进 增强 使 所 有 的 移动 设备 ， 平 板 电脑 和 pc 电脑 都 支持 核心 的 内 容 和 方法 。 而 对 于 新 的 移动 
平台 ， 则 可 以 展现 像 安 装 在 设备 中 的 应 用 程序 一 样 出 色 的 富 媒 体 和 交互 的 浏览 体验 


6 自动 初始 化 通过 页 面 的 html 标 签 的 data-role 属性 ，Jquery Mobile 可 以 自动 初始 化 相应 的 插 
件 


7 优秀 的 可 访问 性 一 些 特性 比如 WAI-ARIA 也 包含 在 内 ， 以 确保 页 面 也 可 以 在 一 些 屏 幕 阅读 器 
(比如 芋 果 的 VoiceOver) 或 者 其 他 手持 设备 中 正常 工作 . 


8 新 的 事件 增加 了 触摸 屏 设备 支持 的 触摸 ， 妃 标 ， 和 基于 光标 的 输入 方法 的 API 
9 增加 了 本 地 控制 的 优化 触摸 体验 和 主题 样式 的 新 的 插件 
9 强大 的 主题 样式 框 和 主题 编辑 器 能 很 容易 的 进行 高 度 个 性 化 和 品牌 化 的 的 界面 定制 


可 访问 性 Accessibility 


Jquery Mobile 是 基于 标准 的 ， 系 统 化 的 html 构 建 的 ， 使 得 页 面 能 够 在 最 广 范围 的 设备 上 得 到 
支持 。 对 于 A 级 的 浏览 器 ， 许 多 Jquery Mobile 组 件 ， 比 "焦点 管理 "," 键 盘 导 航 " 等 都 能 支持 ， 其 
他 可 以 详细 参加 W3C 的 WAI-ARIA 说 明 . 


通过 运用 这 些 技术 ， 我 致力 于 使 得 通过 Jquery Mobile 开 发 的 web 产 品 拥有 最 好 的 可 访问 性 ， 
对 于 伤 残 人 士 ， 例 如 盲人 ， 也 可 以 用 读 屏 软件 ， 例 如 iphone 的 voiceovenr 使 用 。 


我 们 现在 正在 改进 可 访问 性 ， 我 们 的 目标 是 在 1.0 版 本 的 时 候 ， 使 Jquery mobile 的 所 有 控件 都 
拥有 全 部 的 可 访问 性 。 


a4 版 本 支持 的 平台 Supported platforms in Alpha 
4 


在 A4 版 本 中 ， 以 下 平台 和 浏览 器 会 支持 全 部 的 功能 ， 页 面 的 泻 染 也 是 无 误 的 。 现 在 WP7 也 支 
持 了 
e Apple iOS (3.1-4.2): iPhone, iPod Touch, iPad 测 试 通过 


e Android (1.6-2.3): 所 有 设备 均 支 持 ， 在 HTC Incredible, Motorola Droid, Google G1 and 
Nook Color 测 试 通过 


e Blackberry 6: 触摸 操作 和 样式 已 测试 通过 
。Windows Phone 7: HTC 手 机 上 已 通过 

e Palm WebOS (1.4): tested on Pre, Pixi 

e Opera Mobile (10.1): 安 卓 

e Opera Mini (5.02): iOS, 安 卓 


e Firefox Mobile (beta): 2 


API 


默认 配置 


与 Jquery Mobile 自 动 初始 化 共同 协作 Working with 
Jquery Mobile's Auto-initialization 
不 像 其 他 的 Jq 项 目 ， 上 比如 jq 和 jq ui, Jquery Mobile 会 在 加 载 到 增强 特性 时 马上 应 用 它 〈 远 早 于 


document.ready 事 件 发 生 时 ) 。 这 些 特性 会 基于 Jquery Mobile 的 默认 配置 应 用 ， 是 针对 默认 
的 情形 设计 的 ， 他 可 能 符合 你 的 需求 ， 也 可 能 不 符合 。 幸 运 的 是 ， 它 很 容易 设置 


mobileinit 事 件 
当 Jquery Mobile 开 始 执行 时 ， 他 就 会 在 document 对 象 上 触发 mobileinit 事件 ， 所 以 你 可 以 绑 
定 别 的 行为 来 覆盖 默认 配置 


$(document).bind("mobileinit", function(){ 
// 履 盖 的 代码 
3); 


为 mobileinit 事 件 是 在 加 载 后 马上 触发 ， 所 以 你 需要 在 Jquery Mobile 加 载 之 前 绑 定 你 的 事件 
处 理 男 数 ， 所 以 我 建议 你 如 下 安排 你 的 js 引用 顺序 


<script src="Jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="Jquery-mobile.js"></script> 


在 事件 绑 定 内 部 ， 你 可 以 设置 你 的 默认 配置 ， 或 者 是 使 用 jq?.extend 方 法 扩展 $.mobilext kK 


$(document).bind("mobileinit", function(){ 
$.extend( $.mobile , { 


foo: bar 
3); 
3); 
或 者 单独 设置 它 


$(document).bind("mobileinit", function(){ 
$.mobile.foo = bar; 


3); 


jit M 


以 下 的 默认 配置 可 以 通过 $.mobile 对 象 重 新 配置 


ns (CFF, Bik: ""): 


按照 data- 属 性 格式 安排 的 命名 空间 ， 例 如 : data-role, 可 以 设置 为 任何 东西 ， 默 认为 空 字 符 
串 。 如 果 你 包含 一 个 面包 悄 的 话 用 起 来 会 比较 明晰 ， 上 比如 mynamespace-", 会 映射 到 data- 


mynamespace-foo=".. 


subPageUrlKey (_ 字 符 串 ，_ 默认 : "ui-page"): 


url 参 数 用 来 指向 组 件 产生 的 子 页面 (比如 生成 的 藤 套 的 列表 ) 。 会 被 转 义 为 example.html&ui- 
page=subpageldentifier.Jquery Mobile 会 把 &ui-page= 之 前 的 部 分 用 来 向 子 页 面 的 url 地 址 发 
出 ajax 请 求 


nonHistorySelectors (_ 字 符 串 _， 默 认 : "dialog"): 


对 于 带 有 data-rel 属性 的 链接 ， 或 ? data-role 属性 的 页 面 ， 如 果 选 择 器 与 之 匹配 ， 则 他 们 不 
会 在 历史 记录 中 被 追踪 ( 即 它 们 不 会 在 location.hash 中 被 更 新 ， 也 不 能 加 入 到 收藏 夹 ?. 


activePageClass (**_+_#**, Bik: "ui-page-active"): 


给 当前 页 面 (包括 转 场 中 的 ) 分 配 class 
activeBtnClass (_ 字 符 串 _， 默 认 : "ui-page-active"): 
给 活动 状态 的 按钮 分 配 class 值 ， 该 class 值 必须 在 css 框 架 中 存 


ajaxEnabled (_ 布尔 值 _， 默 认 : true): 


Jquery Mobile 会 自动 通过 ajax 义理 链接 点 击 以 及 表单 提交 ?如 果 无 法 义理 ，url hash 监听 将 会 
被 禁用 ，url 也 会 像 常规 那样 发 出 HTTP 请 求 . 


ajaxLinksEnabled (rt, M: true): 

可 行 时 ，Jquery Mobile 就 会 自动 通过 ajax 义理 链接 的 点 击 
ajaxFormsEnabled (_ 布 尔 值 _， 软 认 : true): 

可 行 时 ，Jquery Mobile 就 会 自动 通过 ajax 义理 表单 的 提交 


hashListeningEnabled (zt, MA: true): 


Jquery Mobile 会 自动 监听 与 义理 location.hash 的 改变 。 禁 用 它 会 防止 Jquery Mobilex 2 
location.hash 的 改 ? 使 你 可 以 自己 处 理 他 们 ， 或 者 在 文档 中 用 完整 的 链接 地 址 指 到 一 个 特定 的 
id 值 上 
defaultTransition (_ 字 符 串 _， 黑 认 : 'slide'): 
设置 默认 的 页 面 之 间 的 转 场 效果 。 默 认 的 对 话 框 的 转 场 效果 为 "pop? 设 为 none, 则 无 转 场 效果 
loadingMessage (_ 字 符 串 _， 默 认 : "loading"): 
设置 页 面 加载 时 显示 的 文本 . 如 果 设 置 为 false 将 不 会 显示 任何 文字 
pageLoadErrorMessage (_ 字 符 串 _， 默 认 : "Error Loading Page"): 
通过 ajax 加 载 页 面 失败 时 出 现 的 文本 


gradeA (_ 返 回 一 个 布尔 值 _.， 上 默认 : 返回 $.support .mediaquery 的 值 : 


浏览 器 必须 符合 所 有 支持 的 条 件 才 会 返回 true. 


事件 


Jquery Mobile 提 供 了 一 些 建 于 本 地 事件 的 自 定 义 事件 以 用 来 创建 一 些 有 用 的 钩子 . 要 注意 这 些 
事件 是 建立 于 各 种 已 存在 的 触摸 事件 之 上 ， 上 比如 鼠标 和 窗口 事件 ， 所 以 你 可 以 通过 使 用 live() 
或 者 bind() 将 他 们 绕 定 到 其 他 的 Jquery 事 件 


触摸 事件 Touch events 


tap( 轻 击 ) : 一 次 快速 完整 的 轻 击 后 触 

taphold ( 轻 击 不 放 ) : 轻 击 并 不 放 (大 约 一 秒 ) 后 触 

swipe( 划 动 ) : 一 秒 内 水 平抑 搜 太 于 30PX， 同 时 纵向 拖 虑 小 ?0px 的 事件 发 生 时 触发 
swipeleft ( 左 划 ) : 划 动 事件 为 向 左 的 方向 时 触发 

swiperight (Ax!) : 划 动 事件 为 向 右 的 方向 时 触发 


设 各 方向 变化 事件 Orientation change event 


orientationchange 


当 设 备 的 方向 变化 ( 设 各 横向 持 或 纵向 持 ) 此 事件 被 触发 。 绑 定 此 事件 时 ， 你 的 回调 画 数 可 
以 加 入 第 二 个 参数 ， 作 用 为 描述 设 各 横 或 纵向 的 属性 ，"portrait"?quot;landscape"。 这 些 值 也 
会 作为 class 值 加 入 到 html 的 元 素 中 ， 使 你 可 以 通过 css 中 的 选择 器 改变 他 们 的 样式 。 注 意 当 浏 
览 器 不 支持 orientationChange 事 件 的 时 候 可 以 通过 resize 事件 绑 定 


滚屏 事件 Scroll events 


scrollstart 


当 屏 幕 滚动 开始 的 时 候 触 发 。 芋 果 的 设备 会 在 滚屏 时 冻结 DOM 的 操作 ， 当 滚屏 结束 时 按 队 列 
执行 这 些 dom 操 作 ， 我 们 现在 正在 研究 方法 让 茶 果 的 设备 在 滚屏 开始 前 执行 dom 操 作 


scrollstop 


滚屏 结束 时 触发 


滚屏 事件 Scroll events 


scrollstart 


当 屏 幕 滚动 开始 的 时 候 触发 。 荃 果 的 设备 会 在 滚屏 时 冻结 DOM 的 操作 ， 当 滚屏 结束 时 按 队列 
执行 这 些 dom 操 作 ， 我 们 现在 正在 研究 方法 让 茶 果 的 设备 在 滚屏 开始 前 执行 dom 操 作 


scrollstop 


滚屏 结束 时 触发 


页 面 显示 /隐藏 事件 Page showlhide events 


在 Jquery Mobile 中 ， 无 论 页 面 显示 或 是 隐藏 ， 都 在 该 页 面 触发 两 个 事件 。 哪 个 事件 被 触发 取 
决 于 页 面 被 显示 还 是 隐藏 ， 所 以 当 页 面 转 场 发 生 时 ， 实 际 ? 个 事件 被 触发 了 ， 每 个 页 面 有 两 


个 : 

pagebeforeshow : 转 场 之 前 ， 页 面 被 显示 时 触发 
pagebeforehide : 转 场 之 前 ， 页 面 被 隐藏 时 触发 
pageshow : 转 场 之 后 ， 页 面 被 显示 时 触发 
pagehide : 转 场 之 后 ， 页 面 被 隐藏 时 触发 


请 注意 这 4 个 事件 都 引用 了 ”上 一 页 “”， 或 "下 一 页 ， 这 取决 于 哪 一 页 被 显示 或 者 隐藏 ， 以 及 "上 
一 页 “或 者 "下 一 页 “是 否 存 在 。 《第 一 个 被 显示 的 page 并 没 ?quot; 上 一 ?quot; 可 以 引用 ， 但 是 同 
样 会 引用 一 个 空 的 Jquery 对 象 ) ， 你 可 以 通过 将 第 二 个 参数 作为 一 个 绑 定 的 回调 范 数 访问 这 
一 引用 


$('div').live('pageshow', function(event, ui){ 
alert('This page was just hidden: '+ ui.prevPage); 
3); 
$('div').live('pagehide', function(event, ui){ 
alert('This page was just shown: '+ ui.nextPage); 


}); 


而 且 ， 务 必 在 Jquery Mobile 执行 前 绑 定 这 些 函 数 ， 以 使 他 们 在 初始 化 页 面 加载 时 被 调用 。 
在 mobileinit 事件 的 义 理 函 数 中 使 用 它们 既 可 ， 详 情 参 ?a href="globalconfig.html">global 
config 


页 面 初始 化 事件 Page initialization events 


Jquery Mobile 会 自动 基于 page" 内 的 增强 的 约定 自动 初始 化 一 些 插件 ?例如 : 给 一 个 input 输 入 
框 约定 了 type=range 属 性 会 自动 生成 一 个 自 定义 滑动 条 


这 些 自动 初始 化 的 行为 是 受 "page" 插 件 控制 的 ， 它 在 执行 前 后 部 署 部 署 事件 ， 人 允许 你 在 初始 化 
前 后 操作 页 面 ， 或 者 甚至 自己 提供 初始 化 行为 ， 禁 止 自动 初始 化 。 注 以 下 的 页 面 初 始 化 事件 
在 每 个 “page” 只 被 触发 一 次 ， 而 显 ? 隐 藏 事件 则 不 同 ， 在 页 面 显 示 或 者 隐藏 的 每 次 ， 它 们 都 会 


被 触发 
pagebeforecreate : 页 面 初始 化 时 ， 初 始 化 之 前 触 
pagecreate : 页 面 初始 化 时 ， 初 始 化 之 后 触 


$('#aboutPage').live('pagebeforecreate', function(event) { 
alert('This page was just inserted into the dom!'); 


3); 


$('#aboutPage').live('pagecreate', function(event) { 
alert('This page was just enhanced by Jquery Mobile!'); 


3); 


注意 : 通过 绑 定 pagebeforecreate 然 后 return false， 你 禁止 页 面 插 件 自 己 的 操作 


而 且 ， 务 必 在 Jquery Mobile 执行 前 绑 定 这 些 函 数 ， 以 使 他 们 在 初始 化 页 面 加载 时 被 调用 。 
在 mobileinit 事件 的 处 理 函 数 中 使 用 它们 既 可 ， 详 情 参 ?a href="globalconfig.html">global 
config 


动画 事件 Animation Events 


Jquery Mobile 提 供 了 animationComplete 插件 ， 你 可 以 用 来 添加 或 删除 一 个 class 来 应 用 CSS 
转 场 效 果 


方法 


Jquery Mobile.mobile 对 象 提 供 了 几 种 方法 供 你 在 应 用 中 使 用 


$.mobile.changePage (method) 
通过 程序 跳 转 一 个 页 面 到 另 一 个 页 面 ， 以 点 击 一 个 链接 或 者 提交 表单 的 形式 出 现 ( 当 那些 特性 
被 后 用 时 ) ， 
参数 
to 
字符 串 类 ， 欲 转 到 的 页 面 的 url 地 址 ， 例 如 ("about/us.html") 
e Jquery 对 象 ( $("#about") ) 


。 一 个 指定 了 两 个 页 面 引 用 的 数组 [from to] ， 用 以 在 已 知 的 page 进 行 跳 转 . From 是 当前 
所 能 看 到 的 页 面 ( 或 者 是 $.mobile.activePage ). 


e。 发 送 表 单数 据 的 对 象 ，{url: url, data: 序列 化 的 表单 数据 type: "get" or "post"} 
transition (字符 串 类 型 ， 例 如 "pop", "slide"," "none") 
reverse( 字 符 串 类 型 ， 黑 认 : false). 设置 为 true 时 将 导致 一 个 反方 向 的 转 场 
changeHash( 布 尔 ， 默 认 : true). 页 面 改 变 完成 时 更 新 页 面 url 的 哈 希 值 


实例 


// 使 用 slideup( 上 滑 ) 的 转 场 效 果 转 到 about/us.html 页 面 
$.mobile.changePage("about/us.html", "slideup"); 


// 转 到 searchresults 页 面 ， 使 用 来 自 id 为 Search 的 表单 数 
$.mobile.changePage( { 
url: "searchresults.php", 


type: "get", 
data: $("form#search").serialize() 
3); 


// 使 用 pop 的 转 场 效果 转 ? , /alerts/confirm.html 页 面 ， 不 记录 进 历史 记录 当 
$.mobile.changePage("../alerts/confirm.html", "pop", false, false); 


jqmData(), jqmRemoveData(), and jgmHasData() 
(method) 


在 Jquery Mobile 中 ，jqmData,jqmRemoveData 应 该 用 在 Jquery 核 心 的 data 和 removeData A 
法 ?请 注意 这 也 包 ?$.fn.data, $.fn.removeData,?.data, $.removeData, 以 及 $.hasData 方 法 )， 
因为 他 们 会 自动 获取 ， 设 置 命 名 空间 的 属性 (即使 当前 没有 命名 空间 被 使 用 的 情况 下 。) 


参数 

参见 Jquery 的 data 方 法 和 renovedata 方 法 

并 且 

当 通 过 Jquery 的 data 属 性 寻找 元 素 时 ， 请 使 用 自 定义 的 选择 ? jqmData() ， 因 为 他 在 查询 元 素 
时 会 自动 合并 命名 空间 的 data 属 性 。 例 如 ， 你 应 该 使 $("div:jqmpata(role='page')") ， 而 不 
是 使 s("div[data-role='page']") 选择 元 素 ， 因 为 前 者 会 自动 映 

射 $("div[data-"+ $.mobile.ns +"role='page']") , 你 不 需要 把 命名 手动 的 连接 成 选择 器 


$.mobile.pageLoading (method) 


显示 或 隐藏 页 面 加 载 消 息 ， 该 消息 由 .mobile.loadingMessage 进 行 配置 . 


参数 
Done (_ 布 尔 _， 默 认为 false， 意 味 着 加 载 已 经 开始 ， 设 为 True 会 隐藏 oading 消 息 
示例 


// 显示 页 面 加 载 消息 
$.mobile.pageLoading(); 


// 隐藏 页 面 加 载 消 息 
$.mobile.pageLoading(true) ; 


$.mobile.path (methods, properties) 


用 来 取得 ， 设 置 ， 操 作 url 地 址 


mobile.base (methods, properties) 


用 来 生成 的 根 元 素 


$.mobile.silentScroll (method) 


不 会 触发 任何 事件 ， 静 默 滚屏 到 特定 的 文档 的 Y 值 处 


参数 


yPos (数字 ， 默 认为 0) . 


示例 
// 滚 屏 到 y 100px% 


$.mobile.silentScroll(100); 


$.mobile.addResolutionBreakpoints (method) 


值 〈 数 字 或 数组 ) 。 给 分 辩 率 class 类 添加 任意 的 数字 或 数字 数组 。 详 细 信 息 请 参见 
Orientation & resolution targeting. 


示例 


// 添 加 400px 的 分 辩 率 断 点 
$.mobile.addResolutionBreakpoints(400) ; 


// 添 加 2 个 分 辩 率 断 点 
$.mobile.addResolutionBreakpoints([600, 800] ); 


示例 


// 滚 屏 到 y 100px% 
$.mobile.silentScrol1(100) ; 


$.mobile.activePage (property) 


引用 当前 活动 的 断 


有 响应 的 布局 助手 


媒体 查询 助手 类 Media Query Helper Classes 


Jquery Mobile 给 html 元 素 增加 了 用 来 模拟 浏览 器 的 水 平 坚 直方 向 以 及 常用 的 最 ?最 大 宽度 css 
媒介 查询 class. 这 些 class 会 在 加 载 ， 调 整 大 小 以 及 方向 变化 时 更 新 ， 使 你 能 够 在 css 中 切断 这 
些 class， 以 创建 有 响应 的 布局 ， 即 使 在 不 支持 媒介 查询 的 浏览 器 中 也 可 以 实现 


方向 类 Orientation Classes 


取决 于 浏览 器 或 者 设 各 的 方向 ，HTML 元 素 总 是 会 有 "portrait"( 坚 屏 ) "landscape"( 横 屏 ) class. 
你 可 以 在 css 中 如 下 使 用 它们 : 

.portrait 

/* 垂直 方向 的 变化 的 代码 */ 


.landsca 


e { 
六 ”水 平方 向 的 变化 的 代码 if 
} 


最 小 /最 大 宽度 折断 点 Class Min/Max Width 
Breakpoint Classes 


默认 情况 下 ， 我 们 为 如 下 宽度 创建 了 折断 : 320, 80, 68, 024. 这 些 宽度 对 应 着 如 同 这 样 的 
class:"min-width-320px"，"max-width-480px" 这 意味 着 这 些 class 可 以 应 用 在 替换 (或 附加 ) 它 
们 模拟 的 等 值 的 媒介 查询 


.myelement { 
float: none; 


} 
.min-width-480px .myelement { 
float: left; 


} 


Jquery Mobile 中 的 许多 插件 都 利用 了 这 些 宽 度 折 断 点 .例如 ， 当 浏览 器 宽度 在 480 以 上 时 ， 表 
单元 素 会 浮动 在 label 的 旁边 . 约束 表单 文本 框 的 CSS 在 支持 这 样 的 行为 时 看 起 来 像 这 样 : 


label.ui-input-text { 
display: block; 


.min-width-480px label.ui-input-text { 
display: inline-block; 


添加 宽度 折断 点 Adding Width Breakpoints 


要 利用 你 自己 的 宽度 折断 点 。Jquery Mobile 公 开 $.mobile.addResolutionBreakpoints 函数 ， 
该 范 数 接受 一 个 数字 或 者 数字 的 数组 ， 这 些 值 无 论 何 时 在 函数 被 应 用 到 时 会 被 添加 到 min/max 
折断 点 中 . 


// 添 加 一 个 1200 像 素 的 最 大 /最 小 折断 点 
$.mobile.addResolutionBreakpoints(1200) ; 


/// 添 加 一 个 1200 像 素 和 1400 像 素 2 个 最 大 /最 小 折断 点 
$.mobile.addResolutionBreakpoints([1200,1440]); 


Running Media Queries 运行 媒介 查询 


Jquery Mobile #244—S HATH MRRKMASE AR ANCss 媒介 查询 生效 ， 只 需 调用 
$.mobile.media() 然 后 传递 一 个 media type 或 query 即 可 .如 果 浏 览 器 支持 你 传递 的 那 种 type 或 
query, ERREN, BAA kOltrue, Fr) AkEfalse. 


// 测 试 屏幕 媒体 类 型 


$.mobile.media("screen"); 


// 测 试 最 小 宽度 的 媒介 查询 


$.mobile.media("screen and (min-width: 480px)"); 





// 测 试 是 否 为 葵 果 4 代 手 机 的 屏幕 (视网膜) 


$.mobile.media("Sscreen and (-webkit-min-device-pixel-ratio: 2)"); 


主题 


主题 样式 综述 Theming overview 


Jquery Mobile 中 每 一 个 布局 和 组 件 都 被 设计 为 一 个 全 新 的 面向 对 象 的 css 框 架 ， 使 我 们 能 够 给 
站 点 和 应 用 程序 适用 完全 统一 的 视觉 设计 主题 。Jquery Mobile 的 主题 样式 系统 与 Jquery UI 的 
ThemeRoller 系统 很 类 似 ， 但 是 做 出 了 几 点 重要 的 改进 .他 使 用 的 css3 来 显示 圆 角 ， 文 字 和 便 
阴影 和 颜色 渐变 ， 而 不 是 图 片 ， 使 得 主题 文件 非常 轻 量 级 ， 减 轻 了 服务 器 的 负担 主体 框架 包 

含 了 几 套 颜色 色 板 。 每 一 套 都 包含 了 可 以 自由 混搭 和 匹配 的 头 部 栏 ，body， 按 钮 状态 。 用 来 

构建 视觉 纹理 ， 创 建 丰富 的 设计 开放 的 主题 框架 允许 你 创建 最 多 6 套 主题 样式 ， 给 设计 增加 近 
乎 无 限 的 多 样 性 一 套 简 化 的 图 标 集 ， 包 含 了 移动 设备 上 大 部 分 需要 使 用 的 图 标 ， 并 且 sprite 到 
一 张 图 片 里 减少 了 图 片 大 小 


主题 与 色 板 Themes & swatches 


主题 系统 的 关键 在 于 把 针对 颜色 与 材质 的 规则 ， 和 针对 布局 结构 的 规则 〈 例 如 padding 和 尺 
寸 ) 的 定义 相 分 离 。 这 使 得 主体 的 颜色 和 材质 在 样式 表 中 只 需要 定义 一 次 ， 就 可 以 在 站 点 中 
混合 ， 匹 配 以 及 结合 ， 得 到 广泛 的 使 用 ?每 一 套 主 题 样式 包括 几 项 全 局 设置 ， 包 括 字 体 阴 影 ， 
按钮 和 盒 模型 的 圆 角 值 。 另 外 ， 主 题 也 包括 几 套 颜色 色 板 ， 每 一 个 都 定义 了 工具 栏 ， 内 容 区 
块 ， 按 钮 和 列表 项 的 颜色 以 及 字体 的 阴影 Jquery Mobile 默 认 内 建 了 5 套 主题 样式 ， 用 
(a,b,c,d,e) 引用 。 为 了 使 我 们 的 颜色 主题 能 够 保持 一 直 地 映射 到 我 们 的 组 件 中 ， 我 们 遵从 的 
规约 是 : a 主 题 是 视觉 上 最 高 级 别 的 主题 (黑色 ) ，b 主 题 为 次 级 用 主题 ( 蓝 色 ) ，c 主 题 为 基 
准 主 题 ， 在 很 多 情况 下 是 默认 使 用 的 ， 主 题 d 为 各 用 的 次 级 内 容 用 主题 ， 主 题 e 为 强调 用 主 
题 。 你 也 可 以 手动 添加 主题 用 于 强调 ， 或 者 是 特殊 的 场合 。 例 如 : 你 可 以 手动 添加 新 的 主 
题 “", 用 于 制作 红色 的 工具 栏 或 者 按钮 ， 用 于 错误 提示 全 新 的 ThemeRoller 工 具 会 在 2011 年 
Jquery Mobile 1.0 release 版 本 时 发 布 。 在 这 之 前 ， 也 很 容易 手动 编辑 默认 的 基准 样式 而 且 / 


或 者 编辑 css 文 件 增加 主题 : 拷贝 主题 样式 那 一 段 css， 将 它 用 新 的 字母 重 命名 ， 然 后 更 换 颜 
色 
Bars 


默认 的 主题 包含 了 一 下 的 5 种 bar 的 样 


默认 情况 下 ，Jquery Mobile 给 所 有 的 头 部 栏 和 尾部 栏 分 配 的 是 a 主题 ， 因 为 他 们 在 应 用 中 
是 视觉 优先 级 最 高 的 。 如 果 要 给 bar 设 置 一 个 不 同 的 主题 ， 只 需要 给 头 部 栏 和 尾部 栏 容器 增加 
data-theme 属性 ， 然 后 设 定 一 个 主题 样式 字母 即 可 ， 例 如 b,d 等 ? 更 多 参见 工具 栏 主题 样式 


内 容 Content Blocks 


默认 主题 也 包含 了 用 于 内 容 的 颜色 样式 ， 使 得 在 设计 上 和 与 头 部 栏 的 颜色 相 匹 配 


如 果 没 有 特别 指定 的 话 ，Jquery Mobile 会 默认 给 content 分 配 主题 c， 使 得 在 视觉 上 与 头 部 
栏 区 分 开 来 


列表 和 按钮 Lists & Buttons 


每 一 套 主题 也 包含 了 针对 交互 元 素 ， 上 比如 说 列表 项 和 按钮 的 默认 样式 


默认 情况 下 ， 所 有 放置 在 一 个 bar 里 的 按钮 都 会 被 自动 分 配 一 个 和 它 所 在 的 bar 或 者 box 的 主 
题 样式 所 匹配 的 主题 ， 用 以 在 视觉 上 形成 一 个 整体 ， 像 变色 龙 。 这 样 的 默认 行为 可 以 使 你 
很 容易 地 通过 设置 父 容器 的 主题 样式 改变 整个 页 面 的 主题 ， 因 为 你 知道 按钮 在 不 同 主题 的 视 
觉 配 重 都 是 一 样 的 。 而 因为 表单 元 素 用 按钮 的 样式 ， 他 们 也 会 适 配 他 们 的 父 容器 如 果 你 要 给 
按钮 在 视觉 上 进行 强调 ， 来 帮助 他 从 工具 栏 中 凸现 出 来 ， 可 以 给 链接 增加 data-theme="a" 属 
性 。 给 按钮 在 标记 中 设置 了 不 同 的 主题 后 ， 父 容器 主题 更 改 时 框架 不 会 覆盖 其 颜色 ， 因 为 你 
决定 了 要 设置 它 更 过 参见 。。 


全 局 “活动 ”状态 Global "Active" state 


Jquery Mobile 框 架 用 一 个 单独 的 主题 叫做 "active"( 蓝 色 )， 用 来 总 是 指示 被 选中 的 状态 ， 无 视 
该 组 件 的 主题 . 我 们 给 导航 与 表单 元 素 应 用 了 这 样 的 "活动 "主题 ， 不 管 是 否 有 指示 被 选中 的 状 
态 的 需要 。 因 为 这 一 个 主题 样式 是 设计 用 来 给 用 户 清晰 的 ， 一 致 的 反馈 的 ， 所 以 不 能 通过 标 
记 来 覆盖 ， 在 主题 中 该 项 只 要 设置 一 次 ，，Jquery Mobile 会 在 不 管 被 选中 或 者 活动 状态 需要 
时 都 应 用 他 。 该 样式 在 样式 表 中 的 ui-btn-active 规 则 来 设置 


“活动 "状态 用 来 给 可 切换 的 元 素 标 记 "on" 状 态 


标 Icons 


Jquery Mobile 包 含 了 一 套 标 准 的 图 标 ， 可 以 分 配给 按钮 。 为 了 尽量 减 小 核心 图 标的 文件 大 
小 ，Jquery Mobile 只 包含 了 图 标 白 色 的 图 案 ， 然 后 在 图 标 背 后 自动 添加 了 半 透 明 的 黑色 圆 形 
背景 ， 使 得 图 标 在 所 有 背景 色 下 都 可 以 看 的 明晰 


组 件 


页 面 与 对 话 框 


Jquery Mobile 支 持 包含 万 史 回 退 按钮 的 自动 ajax 读 取 外 部 页 面 的 功能 ， 一 组 页 面 转 场 动画 ， 
以 及 将 页 面 显 示 为 对 话 框 的 简易 工具 。 


nA 


页 面 结 构 Anatomy of a Page 


Jquery Mobile 中 的 "页 面 "结构 已 经 优化 为 支持 单个 的 页 面 ， 或 者 在 一 个 页 面 内 内 人 的 多 
个 “page”。 


使 用 这 种 模型 的 目的 是 使 WEB 开 发 人 员 使 用 最 佳 实践 创建 WEB 网 站 ， 使 得 普通 的 链接 不 需要 
任何 特殊 配置 就 可 以 工作 ， 而 且 能 创造 出 富 媒 体 的 像 本 地 应 用 一 样 通过 标准 的 http 无 法 创造 出 
的 用 户 体验 。 


mobile 页 面 结构 Mobile page structure 


Jquery Mobile 网 站 必须 使 用 HTML5 文 档 声明 开始 ， 使 得 网 站 能 够 适用 HTML5 的 特性 (不 支持 
HTML5 的 旧 浏 览 器 会 静默 地 忽略 HTML5 的 文档 声明 和 一 些 自 定义 属性 ) 。 在 head 标 签 内 需 
要 引用 Jquery,Jquery Mobile 和 mobile 的 主题 CSS 文 件 ， 像 如 下 一 样 开始 : 


HTML 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" href="http://code. Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.min. 
<script type="text/javascript" src="http://code. Jquery.com/Jquery-1.5.min.js"></script> 


<script type="text/javascript" src="http://code. Jquery.com/mobile/1.0a3/Jquery.mobile-1.0 
</head> 


<body> 


</body> 
</html> 





在 body 标 签 内 ， 移 动 设备 上 每 一 个 视图 或 者 "page" 被 一 个 带 有 data-role="page" 的 容器 (通常 
是 div) 所 标示 : : 


<div data-role="page"> ... </div> 
在 page 容 器 内 ， 任 何 有 效 的 html 标 签 都 可 以 使 用 ， 但 是 对 于 Jquery Mobile 的 典型 页 面 来 说 ， 


page 容 器 的 直接 子 结 点 应 该 为 使 用 "data-role" 标 记 属 性 为 "header"content" 和 "footer" 的 3 个 容 
器 。 


HTML 代码 : 


<div data-role="page"> 
<div data-role="header">...</div> 
<div data-role="content">...</div> 
<div data-role="footer">...</div> 
</div> 


一 个 完整 的 独立 页 面 实例 : Complete single page 
template 


集合 在 一 起 后 ， 这 就 是 一 个 标准 的 Jquery Mobile 页 面 的 样板 了 。 


html 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" href="http://code. Jquery.com/mobile/1.0a3/Jquery.mobile-1.0a3.n 
<script type="text/javascript" src="http://code. Jquery.com/Jquery-1.4.3.min.js"></scri 
<script type="text/javascript" src="http://code. Jquery.com/mobile/1.0a3/Jquery.mobile- 
</head> 
<body> 


<div data-role="page"> 


<div data-role="header"> 
<hi>Page Title</hi> 
</div><!-- /header --> 


<div data-role="content"> 
<p>Page content goes here.</p> 
</div><!-- /content --> 


<div data-role="footer"> 
<h4>Page Footer</h4> 


</div><!-- /footer --> 
</div><!-- /page --> 
</body> 
</html> 





[E 
外 部 页 面 的 链接 External page linking 


Jquery Mobile 会 自动 构建 AJAX 了 驱动 的 站 点 和 应 用 。 默 认 情 况 下 ， 当 你 点 击 了 一 个 指向 外 部 页 
面 (比如 : products.html) 的 链接 ，JQmoblie 的 分 析 链 接地 址 ， 然 后 产生 一 oe 
(Hajax) ,显示 一 个 读 取 中 的 提示 框 。 如 果 AJAX 请 求 成 功 ， 新 页 面 的 内 容 会 添加 到 DOM 中 ， 

所 有 MOBILE 组 件 都 会 自动 初始 化 ， 所 以 新 的 页 面 会 通过 页 I o 如 果 AJAX 请 求 

失败 ，JQmoblie 会 显示 一 个 小 错误 提示 框 (默认 的 主题 为 E) ,然后 过 一 会 就 消失 了 ， 不 会 影 

响 你 继续 浏览 。 


本 地 ， 内 部 的 页 面 Local, internal linked "pages" 


一 个 单独 的 HTML 文 档 内 可 以 包含 多 个 由 "data-role="page" 标 记 的 DIV 容器 ， 他 们 在 加 载 时 共 
同 加 载 ， 但 是 被 解释 成 不 同 的 页 面 (个 人 认为 这 是 Jquery Mobile 的 独到 之 处 ) ， 每 一 个 page 
区 块 需要 由 一 个 独特 的 ID(id="foo") 标 记 ， 通 过 给 内 部 链接 地 址 定义 为 (herf="#foo"), 互 相 跳 
转 。 当 连接 被 点 击 时 ，JQmoblie 会 在 文档 内 寻找 带 有 ID 的 page 容 器 ， 然 后 通过 页 面 转 场 显 
示 。 但 请 注意 如 果 你 的 移动 页 面包 括 几 个 "page", 然 后 通过 某 个 链接 被 一 个 外 部 页 面 通过 AJAX 
加 载 ， 你 需要 给 这 个 链接 添加 rel="external" 和 data-ajax="false" 的 属性 。 这 样 就 告知 Jquery 
Mobile 完 全 地 加 载 一 个 页 面 ， 清 理 掉 AJAX 在 URL 的 哈 希 值 。 这 是 很 关键 的 ， 因 为 AJAX 页 面 
EARRA CH) 记录 AJAX 历 史 ， 但 是 包含 多 个 PAGE 的 页 面 也 是 用 哈 希 值 指向 某 个 
PAGE， 所 以 这 样 在 哈 希 值 上 就 会 产生 冲突 。 例 如 : 一 个 指向 包含 多 个 内 部 PAGE 页 面 的 链接 
应 该 如 下 : 


<a href="multipage.html" rel="external">Multi-page link</a> 


下 面 是 一 个 包含 2 个 "PAGE" 的 页 面 ， 两 个 DIV 通过 ID 标记 和 导航 。 请 注意 通过 ID 标记 内 部 页 
的 做 法 只 需要 支持 内 部 的 页 面 链 接 , 如 果 每 个 页 面 是 分 离 的 HTML 文 档 , 则 属性 可 加 也 可 不 
加 。 


<body> 


<!-- Start of first page --> 
<div data-role="page" id="foo"> 


<div data-role="header"> 
<h1>Foo</h1> 
</div><!-- /header --> 


<div data-role="content"> 
<p>I'm first in the source order so I'm shown as the page.</p> 
<p>View internal page called <a href="#bar">bar</a></p> 
</div><!-- /content --> 


<div data-role="footer"> 
<h4>Page Footer</h4> 


</div><!-- /header --> 
</div><!-- /page --> 
<!-- Start of second page --> 


<div data-role="page" id="bar"> 


<div data-role="header"> 
hi>Bar</h1i> 
</div><!-- /header --> 


<div data-role="content"> 
<p>I'm first in the source order so I'm shown as the page.</p> 
<p><a href="#foo">Back to foo</a></p> 

</div><!-- /content --> 


<div data-role="footer"> 
<h4>Page Footer</h4> 


</div><!-- /header --> 
</div><!-- /page --> 
</body> 


请 注意 : 我 们 对 于 所 有 AJAX 的 "page" 使 用 的 是 哈 希 值 来 跟踪 导航 历史 ， 所 以 现在 还 不 可 以 通 
过 外 部 页 面 的 一 个 ID 指向 那 一 个 锚 点 ， 因 为 Jquery Mobile 会 寻找 带 有 该 ID 的 "page", 而 不 是 滚 
屏 到 带 有 该 ID 的 内 容 上 。 


后 退 链接 Back linking 


如 果 你 添加 了 data-rel="back" 属 性 给 某 个 链接 ， 那 对 于 该 链接 的 任何 点 击 行为 ， 都 是 后 退 的 行 
为 ， 会 无 视 链接 的 herf， 后 退 到 浏览 器 历史 的 上 一 个 地 址 。 当 想 链接 到 一 个 命名 好 的 页 面 ， 
或 者 要 关闭 对 话 框 时 特别 有 用 。 使 用 这 一 特性 时 要 注意 : 务必 请 使 用 一 个 有 意义 的 herf 值 实际 
地 指向 要 引用 的 地 址 (因为 这 样 也 会 让 GRADE-C 的 浏览 器 也 支持 这 个 按钮 ) 。 而 且 如 果 你 只 
是 要 看 到 一 个 翻转 的 页 面 转 场 而 不 是 真正 的 回 到 上 一 个 历史 记录 的 地 址 ， 你 就 要 使 用 data- 
direction="reverse" 属 性 ， 而 不 是 后 退 按钮 。 


后 退 链接 Back linking 


如 果 你 添加 了 data-rel="back" 属 性 给 某 个 链接 ， 那 对 于 该 链接 的 任何 点 击 行为 ， 都 是 后 退 的 行 
为 ， 会 无 视 链接 的 herf， 后 退 到 浏览 器 历史 的 上 一 个 地 址 。 当 想 链接 到 一 个 命名 好 的 页 面 ， 
或 者 要 关闭 对 话 框 时 特别 有 用 。 使 用 这 一 特性 时 要 注意 : 务必 请 使 用 一 个 有 意义 的 herf 值 实际 
地 指向 要 引用 的 地 址 (因为 这 样 也 会 让 GRADE-C 的 浏览 器 也 支持 这 个 按钮 ) 。 而 且 如 果 你 只 
是 要 看 到 一 个 翻转 的 页 面 转 场 而 不 是 真正 的 回 到 上 一 个 历史 记录 的 地 址 ， 你 就 要 使 用 data- 
direction="reverse" 属 性 ， 而 不 是 后 退 链接 。 


重 定向 以 及 链接 到 目录 Redirects and linking to 
directories 


当 连 接 到 的 是 一 个 目录 地 址 (比如 href="typesofcats/" 而 不 是 

href="typesofcats/index.html") ， 你 必须 在 地 址 后 面 加 一 个 斜 杠 ("")。 因 为 Jquery Mobile 假 定 
最 后 一 个 斜 杠 后 的 部 分 为 文件 名 ， 当 接 下 来 引用 到 的 页 面 生 成 基地 址 的 会 的 时 候 会 删除 它 。 
但 是 ， 你 可 以 通过 已 经 指定 好 的 data-url 地 址 来 返回 到 上 一 个 page 容 器 ， 就 可 以 绕 过 这 一 个 问 
题 。Jquery Mobile 会 使 用 那个 data-url 值 来 更 新 url， 来 替代 过 去 请 求 的 那个 页 面 。 这 样 你 也 
允许 你 通过 返回 url 的 更 改 来 作为 重 定向 的 结果 。 例 如 : 你 想 通 过 post 方 式 提交 表单 到 
/login.html"， 但 是 提交 成 功 以 后 返回 一 个 ur 为 "account 。 这 个 工具 就 可 以 让 你 在 这 种 情况 下 
控制 历史 记录 堆栈 。 以 下 是 一 个 实例 : 有 一 个 链接 是 指向 "docs-links-urltest/index.html" ， 该 
链接 是 指向 目录 的 索引 页 ， 返 回 的 页 面 会 使 用 "docs/pages/docs-links-urltest/" 更 新 哈 希 值 ， 
这 是 通过 代码 里 的 data-url 值 完 成 的 。 请 注意 data-url 值 会 奉 换 整个 哈 希 值 ， 由 你 来 把 他 蔡 换 
成 当 刷 新 或 者 下 层 链 接 时 URL 发 出 的 请 求 能 解析 正确 的 页 面 .更 多 技术 细节 请 参见 导航 模型 


Ajax, hashes and history 


Tl 442% Page transitions 


Jquery Mobile 框 架 内 置 6 中 基于 css 的 页 面 转 场 效 果 ， 你 可 以 给 任何 对 象 或 页 面 〈 比 如 关闭 页 
面 或 想 换 到 新 页 面 或 者 回 到 上 一 个 页 面 ) 添加 。 黑 认 情 况 下 ，Jquery Mobile 应 用 的 是 从 右 到 
左 划 入 的 转 场 效 果 


给 链接 添加 data-transition 属 性 ， 可 以 设 定 自 定义 的 页 面 转 场 效果 


<a href="index.html" data-transition="pop">I'1ll pop</a> 


1pop 2slideup 3slidedown 4pop 5fade 6flip 


另外 ， 如 果 给 链接 增加 data-direction="reverse" 属 性 ， 则 强制 指定 为 回 退 的 转 场 效 果 


创建 对 话 框 Creating dialogs 


通过 给 指向 页 面 的 链接 增加 data-rel="dialog "的 属性 ， 可 以 把 任何 指向 的 页 面 表 现 对 对 话 框 。 
当 应 用 了 对 话 框 的 属性 之 后 ，qjmobile 框 架 会 给 新 页 面 增 加 圆 角 ， 页 面 周围 增加 margin， 以 及 
深 色 的 背景 ， 使 得 对 话 框 浮 在 页 面 之 上 


HTML 代码 : 


<a href="foo.html" data-rel="dialog">Open dialog</a> 


对 话 框 的 转 场 Transitions 


因为 Jquery Mobile 里 对 话 框 也 是 一 个 标准 的 "page", 所 以 他 会 以 默认 的 slide 转 场 效 果 打 开 。 而 
且 像 其 他 的 页 面 一 样 ， 你 也 可 以 通过 给 链接 添加 data-transition 的 属性 指定 对 话 框 的 转 场 效 
果 。 为 了 让 对 话 框 看 起 来 效果 更 好 ， 我 们 推 ?quotipop", "slideup"，"flip" 三 种 转 场 效果 


HTML 代码 : 


<a href="foo.html" data-rel="dialog" data-transition="pop">Open dialog</a> 


关闭 对 话 框 Closing dialogs 


对 话 框 内 的 任何 链接 被 点 击 时 ，Jquery Mobile 会 自动 关闭 对 话 框 ， 用 回 退 效果 转 场 到 指向 该 
对 话 框 的 页 面 。 要 在 对 话 框 内 创建 一 ?取消 "按钮 ， 只 需要 把 该 链接 的 herf 指 向 打开 该 对 话 框 的 
按钮 然后 给 链接 加 上 data-rel="back" 属 性 。 这 样 制作 的 后 退 链接 在 不 支持 js 的 设备 上 也 同样 管 
用 


对 于 js 生成 的 链接 ， 可 以 把 链接 的 herf 设 为 #", 添 加 data-rel="back" 属 性 。 也 可 以 手动 地 调用 对 
话 框 的 close() 方 法 关闭 对 话 框 ， 上 比如 ? $('.ui-dialog').dialog('close'). 


设置 关闭 按钮 的 文字 Setting the close button text 


就 像 页面 插 件 一 样 ， 你 可 以 设置 程序 或 属性 两 种 方法 设置 对 话 框 关 闭 按钮 的 文字 。 程 序 的 设 
置 可 以 通过 更 改 mobileinit 绑 定 的 事件 ， 然 后 ? $.mobile.dialog.prototype.options.closeBtnText 
设置 一 个 字符 串 。 或 者 给 标记 代码 增加 data-close-btn-text 属性 来 设置 文字 


历史 和 后 退 按钮 的 行为 History & Back button 
behavior 


为 对 话 框 是 典型 地 用 来 给 页 面 起 支持 作用 的 ， 所 以 Jquery Mobile 不 会 在 历史 记录 的 哈 希 值 
里 包含 对 话 框 。 这 就 意味 着 当 点 击 对 话 框 后 退 按钮 时 ， 他 不 会 出 现在 你 的 浏览 器 历史 记录 
里 。 上 比如 说 ， 如 果 你 在 一 个 页 面 上 ， 点 击 了 一 个 按钮 打开 了 一 个 对 话 框 ， 然 后 关闭 了 这 个 对 
话 框 ， 到 了 另 一 个 页 面 。 这 时 如 果 你 点 击 浏览 器 的 后 退 按钮 ， 那 你 会 回 到 第 一 个 页 面 ， 而 不 
是 对 话 框 


Jquery Mobile 的 导航 模型 Jquery Mobile's 
navigation model 


fEJquery Mobile 中 ， 一 个 页 面 " 就 是 一 个 data-role 属 性 被 设 为 "page" 的 容器 ， 通 常 为 div 容 器 ， 
里 面包 含 了 "header', "content",“footer" 三 个 容器 ， 各 自 可 以 容纳 普通 的 html 元 素 ， 表 单 和 自 定 
义 的 Jquery Mobile 组 件 


页 面 载 入 的 基本 工作 流程 如 下 : 首先 一 个 页 面 通过 正常 的 http 请 求 到 ， 然 后 ”page" 容 器 被 请 
求 ， 插 入 到 页 面 的 dom 当 中 。 所 以 dom 文 档 中 可 能 同时 有 多 个 "page" 容 器 ， 每 一 个 都 可 以 通过 
链接 到 他 们 的 data-url 被 访问 到 


当 一 个 url 被 初始 化 请 求 ， 可 能 会 有 一 个 或 多 个 "page" 在 相应， 而 只 有 第 一 个 被 显示 。 存 储 多 
个 “page" 的 好 处 在 于 可 以 使 你 预 读 有 可 能 被 访问 的 静态 页 面 


Ajax 驱动 的 页 面 导 航 Ajax-driven page navigation 


Jquery Mobile 中 所 有 的 导航 都 是 基于 location.hash 的 改变 和 更 新 实现 的 。 当 可 实施 时 ， 页 面 
的 转变 都 会 在 当前 页 面 与 下 一 个 页 面 间 使 用 平滑 的 转 场 效果 ， 不 管 它 已 经 在 当前 的 dom 文 档 
中 ， 还 是 自动 通过 ajax 读 取 的 


Jquery Mobile 会 在 第 一 个 "真正 "的 页 面 加 载 完毕 时 创建 哈 希 值 ， 其 值 为 相对 于 url 的 完整 路 

径 ，hash 值 始终 会 被 维护 为 一 个 可 用 的 URL? 所 以 Jquery Mobile 中 任何 的 "page' 容 器 都 可 以 添 
加 到 收藏 夹 或 者 引用 为 一 个 链接 。 要 获取 非 基 于 hash 的 URL， 只 要 删除 地 址 中 的 人 #" 并 刷新 页 
面 即 可 


通常 ，Jquery Mobile 中 ， 任 何 链 接 被 点 击 都 会 造成 hash 值 的 变化 。 当 链接 被 点 击 时 。Jquery 
mobile 将 确保 该 链接 是 引用 一 个 本 地 URL， 如 果 是 这 样 ， 它 会 阻止 链接 的 默认 的 点 击 行为 ， 
并 通过 Ajax 请 求 引 用 的 网 址 , 当 页 面 成 功 返 回 ， 它 将 location.hash 设 置 到 新 的 页 面相 对 的 URL 


在 框架 中 ， 页 面 的 改变 ， 包 括 已 经 存在 于 DOM 之 中 得 页 面 转 变 和 需要 通过 ajax 加 载 的 页 面 转 
变 ， 都 是 使 用 $.mobile.changePage() 函数 $.mobile.changePage() 包 括 所 有 寻找 页 面 以 及 页 

面 间 切 换 的 逻辑 ,以 及 如 何 处 理 不 同情 况 下 请 求 的 响应 . $.mobile.changePage() HIZ LATE 9 

部 被 调用 ， 该 函数 接受 如 下 的 参 熟 to, transition, back, changeHash. to 参数 可 以 是 一 个 字符 

串 〈 比 如 文件 url 或 者 当前 页 面 的 元 素 ID 值 或 是 一 个 数组 (第 一 个 数组 元 素 为 任意 你 想 转自 的 
当前 页 面 中 的 page， 第 二 个 元 素 为 转 去 的 页 面 ) ， 或 者 一 个 对 象 ( 含 有 如 下 属性 : url, 

type (get 或 post) ，data (用 于 序列 化 的 参数 ) ) ， 后 者 在 加 载 含 有 表单 数据 时 的 页 面 十 分 

AFA, transition 参数 接受 一 个 字符 串 来 表示 采用 何 种 转 场 效果 ， 例 如 "slide"?back 参 数 接受 一 
个 布尔 值 ， 表示 转 场 应 该 前 进 还 是 相反 。 最 后 ，changeHash 参 数 接受 一 个 布尔 值 表 示 你 是 

否 ? 根 据 一 个 成 功 的 页 面 更 改 来 更 新 url 


$.mobile.changePage()H27EJquery Mobile 中 很 多 地 方 都 有 用 到 。 例 如 ， 当 一 个 链接 被 点 击 
a, 它 的 href 属 性 被 解析 ， 然 ?.mobile.changePage() 会 处 理 。 当 表单 被 提交 时 ，Jquery 
Mobile 手 机 一 部 分 表单 的 属性 ， 将 数据 序列 化 ， 然 后 .mobile.changePage() 再 次 接手 该 次 提 
交 并 响应 同样 的 ， 创 建 对 话 框 的 链接 也 是 由 .mobile.changePage() 来 打开 相应 引用 页 ， 但 是 
不 更 新 哈 希 值 ， 使 对 话 框 不 会 在 历史 记录 中 


另 一 个 Jquery Mobile 页 面 导航 模型 中 的 关键 要 素 是 base 元 素 , 它 被 插入 到 head 中 ， 在 每 次 页 面 
变化 时 ， 该 元 素 都 会 被 修改 以 确保 资源 (css, js, BAS) 都 能 够 从 正确 的 地 址 取 到 。 在 不 

支持 动态 更 新 base 元 素 的 浏览 器 (FF3.6) 里 ，Jquery Mobile#i8 5AnA n HSIAM ARH 

把 它们 的 href 和 src 加 上 基地 址 作为 前 组 


哈 希 值 会 在 一 次 独立 的 点 击 时 发 生 时 变化 ， 比 如 一 个 用 户 点 击 后 退 按钮 ， 会 通过 hashchange 
事件 进行 处 理 ， 该 事件 通过 Jquery Mobile 的 哈 希 值 改变 的 特殊 事件 插件 〈 作 者 Ben Alman) 
绑 定 到 window 对 象 。 当 一 个 哈 希 值 更 改 是 ， 或 者 第 一 次 页 面 加 载 时 hashchange 事件 义理 程 
序 会 发 location.hash.mobile.changePage() 画 数 ， 以 加 载 或 者 显示 引用 的 页 面 


引用 的 页 面 存 在 DOM 当 中 之 后 .mobile.changePage() 画 数 会 在 当前 页 和 引用 页 间 应 用 一 个 转 
场 ， 以 显示 页 面 。 页 面 转 场 会 通过 添加 和 移 除 指定 了 css 动 画 的 class 来 实现 。 例 如 ， 在 一 个 向 
左 滑动 的 转 场 效 果 中 ， 已 经 存在 的 页 面 会 被 加 一 个 名 为 "slideleft"out" 的 class， 将 要 显示 的 
页 面 会 被 加 上 "slideleft" 为 "in" 的 class。 动 画 结 束 后 ,"in"out" 的 class 被 删除 ， 退 出 的 页 面 "ui- 
page-active" 的 class 被 删 


base url 管理 解释 Developer explanation of base 
url management: 


Jquery Mobile 使 用 1 生成 的 绝对 URL 地 址 ，2 操 作 生成 元 素 的 href 属 性 的 两 种 办 法 的 结合 管理 
http 请 求 ,这 两 种 方法 的 结合 允许 我 们 创建 包含 完整 路 径 信 息 URL 来 加 载 页 面 ，base 元 素 将 指 
示 资 源 正 确 的 被 加 载 (比如 图 片 和 样式 表 ) 


目 动 生成 的 页 面 和 子 哈 希 表 Auto-generated pages 
and sub-hash urls 


一 些 Jquery Mobile 的 控件 可 能 会 根据 情况 动态 地 把 一 个 页 面 的 内 容 分 离 为 多 个 可 导航 的 页 
面 ， 并 通过 层次 化 的 链接 来 访问 。 比 如 说 list 控 件 ， 他 会 把 一 个 找 套 的 列表 (ul 或 者 ol) 分 离 为 多 
个 页 面 ， 每 一 个 页 面 赋予 一 个 data-url 属 性 ， 可 以 想 正 常 的 "page" 页 面 一 样 被 链接 到 。 但 是 为 
了 链接 到 这 些 页 面 ， 生 成 他 们 的 源 页 面 必须 首先 从 服务 器 请 求 到 ， 所 以 通过 自动 生成 的 页 面 
会 应 用 这 样 的 特殊 data-url 结 构 : 


<div data-url="page.html&subpageidentifier"> 


所 以 例如 通过 列表 控件 生成 的 一 个 页 面 会 拥有 这 样 的 data-url 属 性 : data-url="artists.html&ui- 
page=listview-1 


一 个 页 面 被 请 求 到 后 ，Jquery Mobile 会 在 &ui-page 处 拆 开 url 地 址 ， 使 得 http 请 求 的 是 
artists.html。 在 这 个 例子 中 ，url 上 应 该 为 : http://example.com/artists.html&ui-page=listview-1 
而 Jquery Mobile 会 请 求 : artists.html， 然 后 他 会 生成 子 页 面 ， 创 建 div 容 器 标记 data- 
url="artists.html&ui-page=listview-1" 的 属性 ， 最 后 作为 活动 页 面 显示 


注意 ， 元 素 data-url 属 性 包含 的 是 完整 的 ur 路径， 而 不 仅仅 是 &ui-page= 之 后 的 部 分 。 这 样 
Jquery Mobile 就 可 以 通过 一 个 一 致 的 机 制 来 为 页 面 的 data-url 属 性 匹配 URL 


不 使 用 ajax 导 航 的 情况 Cases when Ajax navigation 
will not be used 


有 时 我 们 要 用 正常 的 http 请 求 而 不 用 Ajax 请 求 ， 比 如 链接 到 别 的 网 站 的 情况 。 通 过 给 链接 加 下 
面 的 属性 ， 可 以 将 链接 指定 为 正常 的 http 请 求 : 


rel=external 


target (打开 规则 ， 例 如"_blank") 


表单 的 提交 Form submissions 


Jquery Mobile 也 会 自动 通过 导航 模型 处 理 表 单 的 提交 。 更 多 细节 请 阅读 表单 章节 


已 知 的 限制 Known limitations 


当 某 链接 指向 的 是 一 个 不 带 文件 名 的 目录 时 ,比如 href="typesofcats/" 而 不 是 
href="typesofcats/index.html"), 路 径 后 必须 加 一 个 反 斜 杠 ("")。 因 为 Jquery Mobile 会 假定 url 里 
最 后 一 个 反 斜 杠 后 面 的 部 分 为 文件 名 ， 从 将 来 的 引用 到 的 页 面 创 建 基地 址 时 会 删除 掉 这 个 文 
件 名 


在 jqmoible 驱 动 的 网 站 中 ， 页 面 内 所 有 指向 唯一 资源 的 引用 都 需要 放 在 “page" 容 器 内 (拥有 
data-role=page 属 性 的 容器 ) 例如 ， 指 向 针对 某 一 个 页 面 的 样式 表 和 js 的 链接 可 放 在 div 中 。 
但 是 我 们 推荐 使 用 Jquery Mobile 的 page 事 件 来 当 该 页 面 加 载 完成 时 触发 特定 的 脚本 执行 ; 你 
可 以 从 服务 器 返回 一 个 已 经 在 标签 中 指定 了 data-url 属 性 的 页 面 ,Jquery Mobile 会 利用 此 来 更 新 
hash。 这 可 以 使 你 确保 带 有 和 斜 杠 的 目录 路 径 解 析 正 确 ， 因 此 也 可 以 用 于 未 来 请 求 所 需 的 基地 
址 . 


而 相反 的 ， 所 有 非 唯 一 的 资源 (全 局 资源 ) 应 该 在 html 文 档 标签 中 被 引用 ,或 者 至 少 
在 'page' 元 素 外 面 ， 以 防止 脚本 重复 运行 . 


"ui-page" 词 名 用 于 子 hash 值 的 url 引 用 ， 可 以 设置 为 任何 你 喜欢 的 值 ， 以 便 配合 你 自己 的 URL 
结构 ， 该 值 存储 于 Jquery.mobile.subPageUrikKey# 


链接 的 格式 Link formats 


Jquery Mobile 支 持 所 有 标准 的 html 格 式 ， 为 了 让 体验 更 加 流畅 ,Jquery Mobile 会 把 同一 个 域 下 
的 所 有 指向 页 面 的 链接 都 会 自动 转 为 ajax 请 求 ， 并 且 用 动画 的 转 场 效果 实现 切换 


指向 别 的 域 的 链接 或 者 是 含有 rel="external", data-ajax="false" 属性 的 链接 以 及 含有 target 属 
性 的 链接 不 会 通过 ajax 加 载 ， 页 面 会 整体 被 刷新 。 如 果 一 个 html 文 档 内 含有 多 ?pages" 容 器 ， 
可 以 通过 ?pages" 容 器 设置 id 属性 ， 然 后 将 链接 指向 id. 


所 有 其 他 类 型 的 链接 别 如 : mailto: 以 及 tel: 不 会 被 Jquery Mobile 影 响 到 。 更 多 细节 请 参见 链接 
导航 模型 


给 页 面 主 题 样式 Page Theming 
Jquery Mobile 内 建 了 一 套 样 式 主题 系统 ， 让 你 给 页 面 添加 样式 时 有 丰富 的 选择 。 针对 每 一 个 
页 面 的 组 件 ， 都 有 详细 的 主题 样式 文档 ， 但 是 我 们 先 看 一 下 怎样 应 用 主题 样式 


给 header 和 footer 容 器 增加 data-theme 属 性 ， 并 设 定 为 a,b,c,d,e. 可 以 应 用 任何 一 套 主题 样式 。 
而 当 给 页 面 内 容 添加 data-theme 属 性 时 ， 我 们 推荐 给 整个 content 容 器 data-role="page" 添 加 ， 
而 不 是 某 个 div 或 容器 ， 这 样 背 景 也 就 可 以 应 用 到 整个 页 面 。 


默认 的 样式 是 混搭 了 多 种 主题 样式 的 样子 ， 使 得 各 个 组 件 层 次 分 明 


< Back Default Theme 


© Tools © Like © Refresh 


Default Theme Content Header 


This is the default content color swatch and a preview of a 
link. 


Input slider: 
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Cache settings: 
"本 


Button 


Button Button Button 


给 下 面 是 5 套 应 用 了 主题 样式 的 页 面 


Hy 


题 A 


jQuery Mobile 中 文 文档 A4 


主题 D 


给 页 面 主 题 样式 Page Theming 
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TRE 


工具 栏 在 此 是 指 在 移动 网 站 和 应 用 中 的 头 部 ， 尾 部 和 内 容 中 的 工具 条 。 所 以 Jquery Mobile 提 
供 了 一 套 标准 的 工具 和 导航 栏 的 工具 ， 可 以 在 绝 大 多 数 情况 下 直接 使 用 


TRE 


工具 栏 综述 Toolbar basics 


在 Jquery Mobile 中 ， 有 两 种 标准 的 工具 栏 : 头 部 栏 和 尾部 栏 


头 部 栏 的 作用 为 网 站 的 标题 ， 通 常 是 移动 网 站 页 面 的 第 一 个 元 素 ， 一 般 包 括 页 面 的 标题 文字 
和 最 多 两 个 按钮 


尾部 栏 通常 是 移动 网 站 页 面 的 最 后 一 个 元 素 ， 在 内 容 和 作用 上 比 头 部 栏 更 自由 一 些 ， 但 一 般 
也 要 包含 文字 和 按钮 


在 头 部 栏 或 尾部 栏 里 放置 一 个 水 平 的 导航 栏 或 选项 卡 栏 的 做 法 是 很 普通 的 ， 所 以 Jquery 
Mobile 包 含 导航 栏 组 件 ， 即 把 无 序列 表 ul 转 化 成 水 平 的 按钮 栏 ， 使 用 也 非常 方便 


工具 栏 定 位 的 设置 Toolbar positioning options 


在 页 面 中 设置 头 部 栏 和 尾部 栏 的 位 置 定 位 有 几 种 方法 。 默 认 情 况 下 ， 工 具 栏 的 定位 的 属性 
为 "inline". 在 这 种 模式 下 ， 头 部 栏 和 尾部 栏 通过 html 自 动 的 文档 流放 置 ， 保 证 了 他 们 能 在 所 有 
的 设备 上 可 见 ， 而 不 需要 依靠 css 和 js 的 定位 的 支持 固定 的 定位 模式 可 以 使 工具 条 在 页 面 多 于 
固定 的 位 置 ， 而 不 需要 通过 js 设置 。 工 具 条 人 处 于 他 们 在 页 面 自然 的 位 置 上 ， 就 像 inline 模 式 一 
样 ， 但 是 当 他 被 滚动 出 屏幕 之 外 时 ，Jquery Mobile 会 自动 通过 动画 使 滚动 条 重新 出 现在 屏幕 
的 顶部 或 底部 任何 时 候 ， 点 击 屏幕 会 切换 固定 定位 模式 的 工具 条 的 显示 : 当 工 具 条 消失 时 点 
击 屏幕 会 让 他 出 现 ， 再 点 击 则 会 让 它 消失 。 这 样 用 户 就 有 选择 在 最 大 化 浏览 时 要 不 要 隐藏 工 
具 栏 ， 要 给 工具 栏 设置 固定 的 定位 模式 ， 只 需 给 工具 栏 的 容器 加 “data-position="fixed" 的 属性 
即 可 全 屏 的 定位 模式 与 固定 的 定位 模式 基本 相同 ， 但 是 当 他 被 滚动 出 屏幕 之 外 时 ， 不 会 自动 
重新 显示 ， 除 非 点 击 屏幕 。 这 对 于 图 片 或 视频 类 有 提升 代 和 人 感 的 应 用 是 非常 有 用 的 ， 当 浏览 
时 你 想 全 屏 都 显示 内 容 ， 而 工具 栏 可 以 通过 点 击 屏 幕 呼出 。 注 意 这 种 模式 下 工具 栏 会 遮 住 页 
面 内 容 ， 所 以 最 好 用 在 比较 特殊 的 场合 下 


KBE 


+ HB 24 44 Header structure 


头 部 栏 是 处 于 页 面 顶部 的 工具 栏 ， 通 常 包 含 页 面 标题 文字 ， 文 字 左边 和 /或 右边 可 以 放置 几 个 
可 选 的 按钮 用 作 导 航 操作 
标题 文字 一 般 用 h1 标 签 ， 但 是 从 h1-h6 都 是 可 以 的 ， 这 样 可 以 使 结构 有 弹性 。 比 如 说 ， 一 个 页 
面 内 包含 了 多 个 "page" 标 记 的 页 面 ， 这 样 可 以 给 主 "page" 的 标题 文字 用 h1 标 签 ， 次 级 "page" 的 
标题 文字 用 h2 标 签 。 所 有 的 头 部 默认 下 在 样式 上 都 是 相同 的 ， 保 持 的 外 观 的 一 致 性 

<div data-role="header"> 


<hi>Page Title</hi> 
</div> 


生 Default header features 





默认 的 关 部 的 特 ' 
头 部 栏 的 主题 样式 默认 情况 下 为 "a"( 黑 色 )， 但 是 你 可 以 很 轻松 的 设置 主题 样式 
默认 的 头 部 栏 


< Back Page title 


看 见 back 按 钮 了 吗 Jquery Mobile 会 自动 给 每 个 页 面 的 头 部 栏 生 成 一 "back'" 按 钮 ， 来 简化 把 按 
钮 放 进 头 部 栏 的 过 程 。 如 果 你 不 想 ?quot;back" 按 钮 放 进 头 部 栏 ， 你 可 以 自己 加 一 个 需要 的 按 
钮 或 者 给 头 部 栏 添加 "data-backbtn='"false" 属 性 


添加 按钮 Adding buttons 


在 标准 的 头 部 栏 的 设置 下 ， 标 题 文字 两 边 各 有 一 个 可 放置 按钮 的 位 置 。 每 一 个 按钮 通常 都 是 
都 是 a, 但 是 任何 有 效 的 按钮 标记 的 元 素 都 可 以 。 为 了 节省 空间 ， 工 具 栏 里 的 按钮 都 是 内 联 按 
钮 ， 所 以 按钮 的 宽度 只 容纳 icon 和 里 面 的 文字 


创建 自 定义 的 后 退 按钮 Creating custom back 
buttons 


给 a 标签 增加 data-rel="back" 的 属性 ， 任 何 链接 都 可 以 样式 化 为 后 退 按 钮 ， 行 为 上 为 后 退 到 上 
一 个 历史 记录 的 页 面 ， 无 视 该 链接 的 herf 地 址 。 这 对 于 要 链接 回 到 一 个 命名 好 的 页 面 的 情况 是 
很 有 用 的 但 是 注意 请 给 链接 设 定 一 个 有 意义 的 herf 地 址 ， 指 向 实际 要 连接 的 页 面 ， 使 得 C 级 浏 
览 器 也 能 够 使 用 这 个 按钮 而 且 要 注意 如 果 你 只 是 需要 一 个 后 退 的 页 面 转 场 效果 ， 而 不 是 真正 
的 后 退 到 上 一 个 历史 记录 的 页 面 ， 应 该 用 data-direction="reverse" 的 属性 ， 而 不 是 用 data- 
rel="back" 属 性 的 按钮 


按钮 默认 的 定位 Default button positioning 


头 部 的 按钮 是 头 部 栏 容 器 的 直接 子 节点 ， 第 一 个 链接 定位 于 头 部 栏 左边 ， 第 二 个 链接 放 在 右 
边 ， 在 这 个 例子 中 ， 根 据 两 个 链接 在 源 代码 中 的 位 置 ， 取 消 在 左边 ， 保 存在 右边 


<div data-role="header" data-position="inline"> 
<a href="index.html" data-icon="delete">Cancel</a> 
<hi>Edit Contact</h1> 
<a href="index.html" data-icon="check">Save</a> 
</div> 


按钮 默认 的 定位 


X_Cancel Edit Contact ¥ Save 


按钮 会 自动 应 用 他 们 的 父 容器 的 主题 样式 ， 所 以 应 用 了 "a" 主 题 样式 的 头 部 栏 里 的 按钮 也 会 应 
用 "a" 主 题 样式 ， 我 们 通过 给 按钮 增加 data-theme 的 属性 并 设置 ， 可 以 使 按钮 看 起 来 有 所 区 别 
<div data-role="header" data-position="inline"> 
<a href="index.html" data-icon="delete">Cancel</a> 
<hi>Edit Contact</h1i> 


<a href="index.html" data-icon="check" data-theme="b">Save</a> 
</div> 


x Cancel Edit Contact ¥ Save 


通过 class 控 制 按钮 的 定位 Controlling button 
position with classes 


按钮 的 位 置 可 以 通过 class 设 置 ， 而 不 依赖 他 们 在 源 代 码 中 的 顺序 。 如 果 你 想 把 唯一 一 个 按钮 
放 在 右边 ， 这 时 就 非常 有 用 了 。 两 个 控制 的 类 为 ui-btn-right 和 ui-btn-left 


在 这 个 例子 中 ， 我 们 要 把 头 部 栏 唯一 一 个 按钮 放 于 右边 ， 首 先 给 头 部 栏 增加 data- 
backbtn="false" 属 性 来 阻止 头 部 栏 自动 生成 后 退 按钮 的 行为 ， 然 后 给 自己 的 按钮 增加 ui-btn- 
right 的 class 


<div data-role="header" data-position="inline" data-backbtn="false"> 
<hi>Page Title</h1> 

<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a> 
</div> 


Page Title # Options 


自 定义 头 退 按钮 的 文字 Customizing the back 
button text 

如 果 你 想 设 置 后 退 按钮 的 文字 ， 需 要 给 页 面 ?page" 元 素 增 加 data-back-btn-text=" 文 字 " 的 属 
性 ， 或 者 通过 程序 来 实现 ?$.mobile.page.prototype.options.backBtnText = "XF"; 


如 果 你 想 配 置 后 退 按钮 的 主题 样式 ， 使 用 $.mobile.page.prototype.options.backBtnTheme = 
"a" 如 果 你 要 用 这 段 程序 ， 需 要 在 mobileinit 时 间 的 义理 程序 中 使 用 


自 定 义 头 部 栏 的 配置 Custom header 
configurations 


如 果 你 想 创 建 一 个 不 遵循 默认 配置 的 头 部 栏 ， 在 header 容 器 里 用 div 包 应 你 的 自 定 义 内 容 就 
好 ，Jquery Mobile 不 会 自动 生成 按钮 ， 所 以 你 可 以 给 你 的 头 部 栏 自 定义 你 的 样式 


尾部 栏 


尾部 栏 结 构 Footer bar structure 


尾部 栏 除 了 使 用 的 data-role 的 属性 与 头 部 栏 不 同 之 外 ， 基 本 的 结构 与 头 部 栏 是 相同 的 


<div data-role="footer"> 
<h4>Footer content</h4> 
</div> 


尾部 工具 栏 默 认 下 应 用 的 主题 样式 为 "a"( 黑 色 )， 但 是 你 可 以 很 轻松 的 设置 主题 样式 
默认 的 尾部 栏 


Footer content 


尾部 栏 的 设置 与 头 部 栏 基本 相同 。 最 大 的 不 同 是 ， 尾 部 栏 被 设 定 为 结构 尽量 简单 ， 所 以 
Jquery Mobile 不 会 自动 给 尾部 栏 生成 按钮 


添加 按钮 Adding buttons 


尾部 栏 添 加 任何 有 效 的 按钮 标记 的 元 素 都 都 会 生成 按钮 。 为 了 节省 空间 ， 工 具 栏 里 的 按钮 
sae 所 以 按钮 的 宽度 只 容纳 icon 和 里 面 的 文字 


默认 情况 下 ， 工 具 栏 内 部 容纳 组 件 与 导航 时 是 不 留 padding 的 。 如 果 要 给 工具 栏 增加 padding， 
请 增加 一 个 ui-bar 的 class. 


<div data-role="footer" class="ui-bar"> 
<a href="index.html" data-role="button" data-icon="delete">Remove</a> 
<a href="index.html" data-role="button" data-icon="plus">Add</a> 
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a> 
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a> 
</div> 


SRL Meat aki, Umea TAR, HY ABM 
data-role="controlgroup" 和 data-type="horizontal" 属 性 


<div data-role="controlgroup" data-type="horizontal"> 


尾部 的 成 组 按钮 


x Remove + Add ^ Up v Down 





增加 表单 元 素 Adding form elements 


表单 元 素 和 其 他 元 素 也 可 以 添加 进 工具 栏 中 。 这 是 一 个 把 select 添 加 到 尾部 栏 的 实例 : 


Shipping: 


Standard: ... v 





持续 的 尾部 栏 Persistent footers 


有 些 情况 下 你 需要 一 个 尾部 栏 为 全 局 导航 元 素 ， 希 望 页 面 转 场 时 尾部 栏 也 固定 并 显示 。 创 造 
一 个 持续 的 尾部 栏 可 以 做 到 这 一 点 


给 尾部 栏 添加 data-id 属 性 ， 并 且 在 所 有 关联 的 页 面 的 尾部 栏 设 定 同样 的 data-id 的 值 ， 就 可 以 
使 尾部 栏 在 页 面 转 场 时 也 固定 并 显示 ， 例如 给 当前 页 面 和 目标 页 面 的 尾部 栏 添 加 
id="myfooter" 属性 ，Jquery Mobile 会 在 页 面 转 场 动画 的 时 候 保持 尾部 栏 固定 请 注意 : 这 个 效 
果 只 有 在 头 部 栏 和 尾部 栏 设 定 为 固定 的 定位 模式 (data-position="fixed") 时 在 才 有 用 ， 这 样 
他 们 在 页 面 转 场 时 才 不 被 隐藏 


导航 栏 


简易 的 导航 栏 Simple navbar 


Jquery Mobile 提供 了 一 个 基本 的 导航 栏 组 件 ， 每 一 行 可 以 最 多 放 5 个 按钮 ， 通 常 在 顶部 或 者 
底 音 


导航 栏 的 代码 为 一 个 ul 列表 ， 被 一 个 容器 包 襄 ， 这 个 容器 需要 有 data-role="navbar" 属 性 。 要 
设 定 某 一 个 链接 为 活动 (selected) 状态 ， 给 链接 增加 class="ui-btn-active" 即 可 。 我 们 给 尾 
部 栏 设置 了 一 个 导航 栏 ， 把 one 项 设置 为 活动 状态 


<div data-role="footer"> 
<div data-role="navbar"> 
<ul> 
<li><a href="a.html" class="ui-btn-active">0ne</a></li> 
<li><a href="b.html">Two</a></li> 
</ul> 
</div><!-- /navbar --> 
</div><!-- /footer --> 


尾部 工具 栏 默 认 下 应 用 的 主题 样式 为 "a"( 黑 色 )， 但 是 你 可 以 很 轻松 的 设置 主题 样式 


导航 栏 内 每 项 的 宽度 都 被 设 定 为 相同 的 ， 所 以 按钮 的 宽度 为 浏览 器 宽度 1/2. 新 增加 一 项 的 
话 ， 每 项 的 宽度 自动 匹配 为 1/3, 以 此 类 推 。 如 果 导 航 栏 多 于 5 项 ， 导 航 栏 自动 表现 为 多 行 


两 个 按钮 的 导航 栏 


One 





三 个 按钮 的 导航 栏 


One 





五 个 按钮 的 导航 栏 


One Two Three 





多 余 5 项 的 导航 


Six 


Eight 


Ten 





头 部 的 导航 栏 Navbars in headers 


如 果 要 给 页 面 头 部 增加 一 个 导航 栏 ， 你 也 可 以 保留 头 部 栏 的 页 面 标题 和 按钮 。 只 需要 把 导航 
栏 容器 放 进 头 部 栏 容器 内 


头 部 的 导航 栏 


l'm a header # Options 


Two Three 





导航 栏 的 图 标 Icons in navbars 


给 导航 栏 的 列表 项 链接 增加 data-icon 属 性 ， 可 以 给 链接 设置 一 个 标准 的 移动 网 站 的 图 标 。 给 
列表 项 链接 增加 data-iconpos="top" 属 性 ， 可 以 给 链接 的 图 标 设置 位 置 为 在 文字 上 方 


导航 栏 的 图 标 





Summary 


使 用 第 三 方 的 图 标 ?Using 3rd party icon sets 


你 可 以 可 以 把 任何 你 喜欢 的 第 三 方 的 icon 组 库 加 入 到 自己 的 项 目 中 。 只 需要 在 css 中 自 定义 
icon 的 地 址 和 位 置 就 可 以 了 。 下 面 一 个 实例 为 使 用 了 Glyphish icon 组 的 导航 栏 


导航 栏 的 图 标 


| 





Email Danger Beer 


Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 
United States License. 
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给 导航 栏 主 题 样 式 Theming navbars 
给 导航 栏 设置 dqata-theme 属 性 ，， 可 以 给 导航 栏 设置 主题 样式 
导航 栏 的 主题 


Gi 


Summary Setup 





导航 栏 
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固定 定位 的 工具 栏 会 在 滚屏 后 重新 出 现 Fixed 
toolbars will re-appear after you scroll 


这 个 页 面 是 一 个 使 用 Jquery Mobile 设 定 了 国定 定位 的 头 部 栏 和 尾部 栏 的 实例 。 页 面 的 文档 流 
是 正常 的 ， 让 我 们 能 够 正常 的 布局 文档 ， 而 不 用 通过 脚本 写 。 头 部 栏 和 尾部 栏 在 文档 流 中 的 
正常 位 置 ， 但 是 当 他 们 被 滚动 出 屏幕 后 ， 你 可 以 通过 点 击 屏幕 ， 使 他 们 重新 出 现 。 再 次 点 击 
或 者 滚动 屏幕 会 使 他 们 重新 出 现在 文档 流 中 (在 顶部 或 底部 ) 


要 给 头 部 栏 或 底部 栏 设置 这 样 的 行为 ， 需 要 给 工具 栏 的 容器 增加 data-position="fixed" 属 性 


<div data-role="header" data-position="fixed"> 
<hi>Fixed toolbars</h1> 
</div> 


全 屏 的 固定 的 工具 栏 ”Fullscreen fixed toolbar 


这 个 页 面 展示 "全屏 "工具 栏 模 式 。 这 个 工具 栏 一 般 用 在 比较 特殊 的 场合 ， 比 如 想 要 把 内 容 撑 满 
全 屏 ， 然 后 头 部 栏 和 尾部 栏 随 着 点 击 页 面 而 出 现 和 消失 -在 图 片 ， 照 片 和 视频 浏览 器 经 常 需 
这 样 

要 打开 工具 栏 的 这 种 特性 ， 给 页 面 的 "page" 增 加 data-fullscreen="true" 属 性 ， 然 后 给 头 部 工具 
栏 和 尾部 栏 的 容器 增加 data-position="fixed" 属 性 


注意 在 这 种 模式 下 工具 栏 会 遮 住 页面 的 内 容 ， 所 以 当 工 具 栏 可 见 时 不 是 全 部 内 容 都 能 够 看 见 
的 


持续 的 尾部 栏 ”Persistent footer nav bar 


这 个 页 面 是 一 个 持续 的 尾部 导航 栏 的 示例 。 在 页 面 的 底部 ， 你 会 看 到 一 个 持续 的 水 平 导航 
栏 。 点 击 任何 链接 ， 你 会 看 到 页 面 会 转 场 到 另 一 个 ， 但 是 尾部 栏 保持 了 固定 。 因 2 个 页 面 都 是 
用 了 同样 的 data-id 属性 


给 头 部 栏 和 尾部 栏 设置 主题 样式 


头 部 栏 和 尾部 栏 都 默认 都 设 "a" 主 题 样式 (黑色) ， 因 为 这 两 个 工具 栏 在 视觉 上 为 页 面 最 首要 
的 


给 头 部 栏 和 尾部 栏 设 置 主 题 样式 Theming headers 
and footers 


给 头 部 栏 和 尾部 栏 设 置 data-theme 属 性 ， 并 指定 不 同 的 字母 (a, b, c 等 ) 。 下 面 一 个 例子 是 把 
头 部 栏 的 主题 样式 设 ?b"( 茧 色 ) 


<div data-role="header" data-theme="b"> 
<hi>Page Title</h1i> 
</div> 


给 导航 栏 的 按钮 设置 主题 样式 Theming buttons in 
toolbars 

头 部 栏 里 的 任何 加 入 的 任何 链接 会 自动 设 为 与 此 工具 栏 相 同 的 主题 样式 。 给 链接 增加 data- 
theme 属 性 并 设置 ， 可 以 让 按钮 的 主题 样式 与 工具 栏 的 不 相 一 致 。 例 如 : 如 果 我 们 给 头 部 栏 设 
定 的 主题 祥 式 为 "c"( 浅 厌 )， 里 面 的 两 个 按钮 的 主题 祥 式 默认 也 会 为 "c", 如 果 我 们 想 让 按钮 有 所 
区 别 ， 可 以 给 按钮 设置 data-theme?b"( 蓝 色 ) 


<a href="add-user.php" data-theme="b">Save</a> 


不 同 主题 的 头 部 栏 
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x Cancel 
+ New 


x Cancel 





© Cancel 


【x Cancel | 





不 同 主题 的 尾部 栏 


left < right > 


left < right > 





Bar theme "a 


Bar theme "a 


Bar theme "b" 


Bar theme "b" 


Bar theme "c 
Bar theme "c" 
Bar theme "d" 


Bar theme "d" 


up ^ down v 


up ^| down v 








Save > 
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按钮 


按钮 是 Jquery Mobile 的 核心 组 件 ， 在 其 他 的 组 件 中 也 广泛 应 用 。 起 导航 作用 的 按钮 应 该 写 为 
链接 ， 在 表单 内 起 提交 作用 的 按钮 -Jquery Mobile 会 同样 的 样式 来 标记 。 


按钮 标记 选项 Button markup options 

起 导航 作用 的 按钮 应 该 写 为 链接 ， 在 表单 内 起 提交 作用 的 按钮 ,Jquery Mobile 会 同样 的 用 样式 
来 标记 。 

将 链接 样式 化 为 按钮 Styling links as buttons 


在 page 的 区 域内 ， 可 以 通过 给 链接 加 data-role="button" 的 属性 样式 化 为 按钮 。Jquery Mobile 
会 给 链接 加 一 些 必 要 的 class 来 把 他 表现 为 按钮 。 


html 代 码 : 
<a href="index.html" data-role="button">Link button</a> 
基于 连接 的 按钮 : 


Link button 


表单 按钮 Form buttons 


为 了 容易 的 样式 化 按钮 ，Jquery Mobile 自 动 把 type 为 submi,reset,button 或 image 的 按钮 元 素 
或 输入 元 素 样 式 化 为 按钮 ， 所 以 没有 必要 增加 data-role="button" 的 属性 


基于 表单 (form-based) 的 按钮 的 原始 按钮 (input) 是 隐藏 的 ， 但 是 依然 保留 其 标记 。 当 一 个 按钮 
的 点 击 事件 触发 时 ， 也 会 在 原始 的 表单 按钮 上 触发 点 击 事件 。 


给 按钮 添加 图 标 Adding Icons to Buttons 


Jquery Mobile 框 架 包 含 了 一 组 最 常用 的 移动 应 用 程序 所 需 的 图 标 ， 为 了 减少 下 载 的 大 小 ， 
Jquery Mobile 包 含 的 是 的 白色 的 图 标 sprite 图 片 ， 并 自动 在 图 标 后 添加 一 个 半 透 明 的 黑 圈 以 确 
保 在 任何 背景 色 下 图 片 都 能 够 清晰 显示 。 


给 链接 添加 data-icon 属性 ， 可 以 添加 按钮 的 图 标 


html 代 码 


<a href="index.html" data-role="button" data-icon="delete">Delete</a> 


带 有 图 标的 按钮 : 


Delete 


图 标 Icon set 


data-icon 属 性 可 以 被 用 来 创建 如 下 所 示 的 图 标 

左 箭头 data-icon="arrow-1" 

Agi data-icon="arrow-r" 

ai data-icon="arrow-u" 

下 箭头 data-icon="arrow-d" 
删除 data-icon="delete" 

添加 data-icon="Plus" 

减少 data-icon="minus" 

检查 data-icon="Check" 

齿轮 data-icon="gear" 

a data-icon="Forward" 
退 data-icon="Back" 

网 格 data-icon="Grid" 


AA ?3 data-icon="Star" 


data-icon="Alert" 
Ens data-icon="info" 
首页 data-icon="home" 


搜索 data-icon="Search" 


标 组 Icon set 


默认 情况 下 ， 所 有 按钮 图 标 出 现在 按钮 的 文本 的 左 侧 。 


可 以 通过 data-iconpos="top" / "bottom" 属性 来 覆盖 此 默认 


<a href="index.html" data-role="button" data-icon="delete"** data-iconpos="right"**>Delet 





一 个 图 标 在 右边 的 按钮 : 
Delete 


也 可 以 用 data-iconpos="top" 创 建 图 标 在 文本 上 方 的 按钮 
一 个 图 标 在 文字 上 方 的 按钮 : 


Delete 


也 可 以 用 data-iconpos="bottom" 创 建 图 标 在 文本 下 方 的 按钮 
一 个 图 标 在 文字 下 方 的 按钮 : 


Delete 


Ta J 
a} 


你 可 以 通过 data-iconpos="notext" 创 建 一 个 只 有 图 标的 按钮 。button 插 件 会 在 屏幕 上 隐藏 文 
本 ， 但 是 会 把 文本 作为 title 属 性 作为 screen readers 的 问 容 和 支持 小 提示 的 浏览 器 ， 例 如 ， 把 
前 例 中 的 data-iconpos="right" 44% X data-iconpos="notext" 


<a href="index.html" data-role="button" data-icon="delete"** data-iconpos="notext"**>Dele 


«| 











一 个 只 有 图 标的 按钮 


© 


自 定 义 图 标 Custom Icons 


要 使 用 自 定 义 图 标 ， 指 定 一 个 唯一 的 data-icon 值 (比如 data-icon=“myapp-email ”) ?Jquery 
Mobile 的 button 插 件 会 生成 一 个 class 值 添加 上 去 ， 该 值 由 ui-icon- 与 data-icon 的 值 组 合 而 成 
(ui-icon-myapp-email ) ， 然 后 在 css 中 指定 这 个 类 的 背景 图 片 地址 。 为 了 保持 视觉 效果 的 一 
致 ， 请 使 用 png-8 格 式 的 白色 8*18 的 透明 图 标 


图 标 和 地 址 Icons and themes 


在 白色 图 标 后 的 半 透 明 的 黑色 圆圈 确保 了 在 任何 背景 色 下 图 片 都 能 够 清晰 显示 ， 也 使 它 能 很 
好 的 工作 在 Jquery Mobile 主 题 系统 中 。 以 下 是 一 些 在 不 同 主题 样式 下 图 标 按钮 的 例子 


"A" 主 题 下 的 图 标 按钮 


< > A vi Xx + — vi & 6 eC 内 





"B" 主 题 下 的 图 标 按钮 


< | @2' CG) 2/16 9/€>' -SIDI 





"C" 主 题 下 的 图 标 按钮 


QOOOOOOOOOOOOOOOO0OO00 


内 联 按钮 Inline buttons 


默认 情况 下 ，body 里 的 所 有 按钮 都 会 被 样式 化 为 块 级 元 素 ， 撑 大 到 和 与 页 面 等 宽 


但 是 ， 如 果 你 想 让 按钮 外 观 紧 凑 ， 宽 度 只 符合 里 面 的 文字 和 icon， 那 就 给 按钮 添加 data- 
inline="true" 的 属性 


内 联 的 按钮 : 
Button 


如 果 你 有 多 个 按钮 想 在 一 行 横 排 ， 可 以 在 按钮 上 增加 data-inline="true" 的 属性 ， 这 样 就 可 以 把 
按钮 样式 化 为 最 小 宽度 ， 并 且 浮 动 ， 使 他 们 在 同一 行 横 排 
<div data-inline="true"> 
<a href="index.html" data-role="button">Cancel</a> 


<a href="index.html" data-role="button" data-theme="b">Save</a> 
</div> 


内 联 的 按钮 组 


如 果 你 想 多 个 按钮 在 通过 一 行 横 排 并 且 容 器 自动 撑 大 到 和 与 页 面 
同 宽 ， 可 以 使 用 内 容 分 栏 把 多 个 普通 的 块 级 按钮 放 入 同一 行内 


组 按钮 Grouped buttons 


有 时 候 ， 你 想 把 一 组 按钮 放 进 一 个 单独 的 容器 内 ， 使 他 们 看 起 来 想 一 个 独立 的 导航 部 件 。 你 
可 以 把 一 组 按钮 包 右 在 一 个 容器 内 ， 然 后 给 该 容器 添加 data-role="controlgroup" 属 性 ，Jquery 
Mobile 会 创建 一 个 垂直 的 按钮 组 ， 删 除 掉 按 钮 间 的 margin 和 阴影 ， 然 后 只 在 第 一 个 按 和 钮 和 最 
后 一 个 按钮 产生 圆 角 ， 使 他 们 看 起 来 是 一 组 按钮 


<div data-role="controlgroup"> 
<a href="index.html" data-role="button">Yes</a> 
<a href="index.html" data-role="button">No</a> 
<a href="index.html" data-role="button">Maybe</a> 


</div> 
按钮 组 : 
Yes 
No 
Maybe 


默认 情况 下 ， 组 按钮 表现 为 垂 
直列 表 ， 如 果 给 容器 添加 data-type="horizontal" 的 属性 ， 则 可 以 转换 为 水 平 按钮 的 列表 ， 按 钮 
会 横向 一 个 挨 着 一 个 地 排列 ， 容 器 会 自动 撑 大 到 适应 内 容 (所 以 要 注意 横 排 情况 下 按钮 不 要 
太 多 ， 按 钮 的 字 也 不 要 太 多 ) 


水 平 的 组 按钮 Horizontal grouped buttons: 


Yes No Maybe ) Up Down Delete 


Up Down > Delete 


主题 化 按钮 Theming buttons 


Jquery Mobile 内 建 了 几 套 样式 系统 ， 给 你 定义 样式 时 多 种 选择 ， 在 容器 内 添加 一 个 按钮 后 ， 
它 就 会 自动 应 用 他 的 容器 使 用 的 样式 系统 ， 使 得 按钮 和 页 面 看 起 来 协调 统一 ， 像 变色 龙 所 以 
放 进 一 个 样式 主题 为 a 系统 (黑色 主题 ) 容器 的 按钮 会 自动 应 用 a 系统 样式 。 如 下 为 实例 a 为 
黑 ，b 为 灰 诡 蓝 ，c 为 灰 诡 灰 ，d 白 底 白 色 ，e 黄 底 黄色 


人 A 主题 


A swatch 





~ 


B 主 题 


B swatch 


C 主 题 





C swatch 


Button 


D 主 题 


D swatch 


Button 


E 主 题 


E swatch 





分 配 系统 样式 Assigning theme swatches 
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给 按钮 增加 data-theme=" 字 母 " 属 性 ， 可 以 手动 的 给 按钮 添加 样式 ， 使 得 按钮 不 一 定 非 要 与 父 


容器 的 样式 相符 


<a href="index.html" data-role="button" data-theme="a">Theme a</a> 


5 个 通过 data-theme 设 定 不 同 主题 的 按 


O Theme d 





A 主 题 下 的 不 同 主题 的 按钮 


< Themea < Theme b 





O Theme d 9 Theme e 


B 主 题 下 的 不 同 主题 的 按钮 





© Theme d 





C 主 题 下 的 不 同 主题 的 按钮 


© Theme d 





D 主 题 下 的 不 同 主题 的 按钮 


主题 化 按钮 Theming buttons 
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O Theme d 





E 主 题 下 的 不 同 主题 的 按钮 


@ Theme d 





主题 化 按钮 Theming buttons 
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内 容 的 格式 化 


在 Jquery Mobilede 页 面 的 内 容 是 完全 开放 的 ， 但 是 Jquery Mobile 框 架 提供 了 一 些 有 用 的 工具 
及 组 件 ， 上 比如 可 折 营 的 面板 ， 多 列 网 格 布 局 等 ?方便 地 为 移动 设备 格式 化 你 的 内 容 


html 格 式 化 HTML Formatting 


在 Jquery Mobile 中 通过 默认 方法 给 内 容 添 加 样式 是 很 简单 的 。 我 们 的 目标 是 让 浏览 器 的 默认 
泻 染 优 先进 行 ， 然 后 我 们 加 了 一 点 小 小 的 padding 让 页 面 看 起 来 更 有 可 污 性 ， 然 后 应 用 主题 样 
式 系统 来 分 配 字体 和 颜色 

采用 熟 手 优先 原则 给 与 了 设计 者 和 开发 者 一 个 干净 的 空间 工作 ， 而 不 是 和 一 大 堆 复 条 的 样式 
代码 战斗 。 


默认 HTML 标 记 样 式 Default HTML markup styling 


默认 情况 下 ，Jquery Mobile 的 主题 样式 为 标准 的 html 元 素 使 用 标准 的 html 样 式 ， 字 号 ， 例 如 
header,p, block quotos,a,ul,ol,dl,dt 
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布局 网 格 Layout grids 


因为 屏幕 通常 都 比较 窄 ， 所 以 使 用 多 栏 布局 的 方法 在 移动 设备 上 不 是 推荐 的 方法 。 但 是 总 有 
时 候 你 会 想 要 把 一 些小 的 元 素 并 排放 置 (比如 按钮 ， 或 导航 标签 ) 


Jquery Mobile 框 架 提 供 了 一 种 简单 的 方法 构建 基于 css 的 分 栏 布 局 ， 叫 做 ui-grid 


Jquery Mobile 提 供 了 两 种 预 设 的 配置 布局 : 两 列 布局 (class 含有 ui-grid-a) 和 三 列 布局 
(class 含有 ui-grid-b) 一 几乎 可 满足 需要 列 布局 的 任何 情况 。 网 格 是 100% 宽 的 ， 不 可 见 
(没有 背景 或 边框 ) ， 也 没有 padding 和 margin， 所 以 它们 不 会 影响 内 部 元 素 的 样式 


两 栏 布局 Two column grids 


要 构建 两 栏 的 布局 (50/50%) ， 先 构建 一 个 父 容器 ， 添 加 一 个 class 名 字 为 : ui-grid-a, 内 部 设 
置 两 个 字 容 器 ， 分 别 给 第 一 个 子 容器 添加 class : ui-block-a， 第 二 个 子 容 器 添加 class : ui- 
block-b 


<div class="ui-grid-a"> 
<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div> 
<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div> 
</div><!-- /grid-a --> 


I'm Block A and text inside will I'm Block B and text inside will 
wrap. wrap. 


如 上 所 见 ， 默 认 的 两 栏 没有 样式 ， 并 行 排列 。 分 栏 的 class 可 以 应 用 到 任何 类 型 的 容器 上 。 下 


一 个 实例 中 ， 我 们 给 表单 的 fieldset 添 加 class="ui-grid-a"， 然 后 给 两 个 button 的 所 在 的 子 容器 
添 class="ui-block-a" 和 class="ui-block-b"。 使 两 个 容器 各 自 50% 的 宽 


在 下 面 的 区 块 中 ， 我 们 增加 了 两 个 class, 增 加 ui-bar 的 class 给 默认 的 bar padding, t?ui-bar-e 
的 class 应 用 背景 渐变 以 及 工具 栏 的 主题 e 的 字体 样式 。 然 后 在 每 个 网 格 的 标签 内 增加 
style="height:120px" 的 属性 来 设置 高 度 





Block A 





布局 网 格 Layout grids 
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三 栏 布局 Three-column grids 


另 一 种 布局 的 方式 是 三 栏 布 局 ， 给 父 容器 添加 ”class="ui-grid-b"， 然 后 分 别 给 三 个 字 容 器 添 ? 
加 class="ui-block-a", “class="ui-block-b", ”class="ui-block-c" 


<div class="ui-grid-b"> 
<div class="ui-block-a">Block A</div> 
<div class="ui-block-b">Block B</div> 
<div class="ui-block-c">Block C</div> 
</div><!-- /grid-a --> 


就 会 生成 一 个 33/33/33% 的 分 栏 布局 





3 列 网 格 布局 里 面 是 按钮 的 示例 


以 此 类 推 : 如 果 是 4 栏 布 局 ， 则 给 父 容器 添加 class="ui-grid-c" (2 栏 为 a，3 栏 为 b, 4 栏 为 c, 5 栏 
为 d。。。。) ， 子 容器 分 别 添加 class="ui-block-a"， ”class="ui-block-b" “class="ui-block- 






Yes 


多 行 的 网 格 布局 Multiple row grids 
网 格 化 布局 也 适用 于 多 栏 布局 的 方式 ， 上 比如 ， 如 果 你 指定 了 一 列 布局 的 父 容器 ， 里 面 有 9 个 子 


容器 ， 则 会 包 襄 为 3 行 ， 每 行 3 个 。 可 以 给 每 行 的 第 一 个 容器 设置 为 class=ui-block-a 来 清除 浮 
动 ， 这 样 9 个 子 容器 的 class 应 为 : class=ui-block-(a,b,c,a,b,c,a,b,c) 重 复 


布局 网 格 Layout grids 69 
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At SKWAZ Collapsible content markup 


要 创建 一 个 可 折 受 的 区 块 ， 先 创建 一 个 容器 ， 然 后 给 容器 添加 data-role="collapsible" 属 性 


容器 内 直接 的 标题 (h1-h6) 子 结 点 ，Jquery Mobile 会 将 之 表现 为 可 点 击 的 按钮 ， 并 在 左 侧 添 
加 一 个 “+" 按 钮 ， 表 示 是 可 以 展开 的 


在 头 部 后 面 你 可 以 添加 任何 想 要 折 怠 的 html 标 记 。 框 架 会 自动 把 这 些 标记 包 囊 在 一 个 容器 里 用 
Dat & BY 


<div data-role="collapsible"> 

<h3>I'm a header</h3> 

<p>I'm the collapsible content. By default I'm open and displayed on the page, but you 
</div> 





I'm a header 


l'm the collapsible content. By default I'm open and displayed on 
the page, but you can click the header to hide me. 


如 上 所 示 : 默认 情况 下 ， 可 折 和 县 容器 是 展开 的 ， 可 以 通过 通过 点 击 头 部 收缩 。 给 折 有 各 的 容器 
添加 data-collapsed="true" 的 属性 ， 可 以 设 为 默认 收缩 


<div data-role="collapsible" **data-collapsed="true">** 


可 折 芝 的 内 容 采 用 了 精简 的 样式 ， 我 们 仅仅 在 内 容 和 标题 间 添 加 了 一 些 margin， 标 题 则 采用 
它 所 在 容器 的 默认 主题 


fri Æ Nested Collapsibles 


I'm a header 


l'm the collapsible content. By default I'm open and displayed on 
the page, but you can click the header to hide me. 


I'm a nested collapsible header 


I'm the collapsible content. By default I'm open and displayed 
on the page, but you can click the header to hide me. 


+ #28 Collapsible sets 


通过 给 父 容器 添加 data-role="collapsible-set" 属 ?然后 每 一 个 子 容 器 data-role="collapsible" 属 
性 ， 可 以 让 容器 展开 时 ， 其 他 容器 被 折 受 的 效果 ， 类 似 手风琴 组 件 


© I'm a header in a set of collapsibles 


l'm the collapsible content. I'm hidden by default because | have 
the "collapsed" state; you need to expand the header to see 
me. 


© I'ma header in a set of collapsibles 


© I'ma header in a set of collapsibles 


aw 
给 内 容 主题 Theming content 
页 面 的 主题 内 容 区 域 ( 标 有 data-role="content" 属 性 的 容器 ) ， 应 该 通过 给 data- 
role="page" 属 性 的 容器 增加 data-theme 属 性 来 确保 不 管 页 eee E 够 在 整个 页 面 都 


应 用 到 (如 果 你 只 为 data-role="content" 容 器 添加 了 data-theme 属 性 ， 则 背景 色 会 在 内 容 结 束 
部 分 停止 ， 可 能 会 造成 固定 尾部 栏 和 内 容 之 间 产 生 留 白 


<div data-role="page" **data-theme="a"**> 


st & KÈ Theming collapsible blocks 


人 theme 属 性 ， MAUNA ARN PME = 题 。 Awl ae 
内 容 目前 还 不 能 通过 data-theme 属 性 设置 ， 但 是 可 以 通过 自 定义 的 css 设 置 


<div data-role="collapsible" data-collapsed="true" **data-theme="a">** 


主题 的 示例 Themed examples 


主题 a 


H1 Heading 


This is a paragraph that contains strong, emphasized and 

text. Here is more text so you can see how HTML 
markup works in content. Here is more text So you can see 
how HTML markup works in content. 


©) I'm an themed collapsible 





主题 b 
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H1 Heading 


This is a paragraph that contains strong, emphasized and 
linked text. Here is more text so you can see how HTML 
markup works in content. Here is more text so you can see 
how HTML markup works in content. 


©) I'm an themed collapsible | 
| 


主题 c 



































H1 Heading 


This is a paragraph that contains strong, emphasized and 
linked text. Here is more text so you can see how HTML 
markup works in content. Here is more text so you can see 
how HTML markup works in content. 


© I'm an themed collapsible 


主题 d 


H1 Heading 


This is a paragraph that contains strong, emphasized and 
linked text. Here is more text so you can see how HTML 
markup works in content. Here is more text so you can see 
how HTML markup works in content. 





| © I'm an themed collapsible 


主题 e 


给 内 容 主 题 Theming content 
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H1 Heading 


This is a paragraph that contains strong, Ee and 
linked text. xt. Here ue nee 


容 主题 Theming content 
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表单 元 素 


表单 元 素 Form elements 


所 有 的 表单 元 素 都 是 由 标准 的 html 元 素 控制 的 ， 然 后 又 得 到 增强 ， 使 他 们 更 吸引 人 并 且 容 易 使 
用 。 在 不 支持 Jquery Mobile 的 浏览 器 下 仍然 是 可 用 的 ， 因 为 它们 都 是 基于 原生 的 html 元 素 . 


表单 基础 Form basics 


Jquery Mobile 提 供 了 一 套 完 整 的 ， 适 合 触 摸 操作 的 表单 元 素 ， 他 们 都 是 基于 原生 的 html 元 素 


表单 结构 Form structure 


所 有 的 表单 都 应 该 被 包 训 在 一 个 form 标 签 内 ， 这 个 标签 应 该 指定 好 action 和 method 属性 用 来 
控制 与 服务 器 传送 数据 的 方法 


html 代 码 


<form action="form.php" method="post"> ... </form> 


标记 的 规约 Markup Conventions 


在 Jquery Mobile 中 组 织 表 单 时 ， 大 多 数 创建 普通 的 HTTP post ，get 方 式 的 表单 是 需要 遵守 的 
规约 依然 是 适用 的 ? 但 是 有 一 点 要 注意 ，form 的 id 属 性 不 仅 需 要 在 该 页 面 内 唯一 ? 也 需要 在 整 

个 网 站 的 所 有 页 面 中 是 唯一 的 这 是 因为 Jquery Mobile 的 单 页 面 内 导航 的 机 制 使 得 多 个 不 

同 "page" 可 以 同时 在 DOM 中 出 现 ， 所 以 你 必须 给 表单 使 用 不 同 的 id 属性 ， 以 保证 在 每 个 DOM 

中 的 表单 的 ID 都 是 不 同 的 。 (当然 ， 请 务必 给 内 部 的 label 元 素 合 适 的 使 用 for 属 性 ) 


表单 元 素 的 自动 初始 化 Auto-initialization of form 
elements 


默认 情况 下 ，Jquery Mobile 会 自动 把 原生 的 表单 元 素 增强 为 适合 触摸 操作 的 组 件 。 这 是 它 通 
过 标签 名 寻找 表单 元 素 ， 然 后 对 他 们 执行 Jquery Mobile 插 件 的 方法 内 部 实现 的 ， 所 以 比如 
说 ，Select 元 素 被 找到 后 ，Jquery Mobile 通 过 用 selectmenu 插 件 进 行 初始 化 ， 而 一 个 属性 为 
type="checkbox" 的 input 元 素 会 被 checkboxradio 插 件 来 增强 。 初 始 化 完毕 后 ， 你 可 以 用 他 们 
的 Jquery UI 的 组 件 的 方法 通过 程序 进一步 使 用 或 设 定 他 们 的 增强 功能 。 (查看 查找 可 用 的 方 
法 ) 


防止 表单 元 素 被 自动 初始 化 Preventing auto- 
initialization of form elements 


如 果 你 需要 某 表 单元 素 不 被 Jquery Mobile 处 理 ， 只 需要 给 这 个 元 素 增加 data-role="none" R 
性 


html 代 三 


<label for="foo"> 
<select name="foo" id="foo" data-role="none"> 
<option value="a" >A</option> 
<option value="b" >B</option> 
<option value="c" >C</option> 
</select> 


或 者 ， 如 果 你 不 想 增 加 上 述 的 属性 ， 可 以 设置 页 面 插件 ?keepNative 选 项 〈 黑 认 情 况 下 为 
[data-role="none"]) ， 来 自 定义 用 来 防止 初始 化 的 选择 器 。 请 务必 在 mobileinit 事 件 的 处 理 程 
序 中 设置 这 个 选项 ， 能 让 第 一 个 页 面 以 及 随后 被 加 载 的 页 面 应 用 此 设置 


html 代 码 


$(document).bind( 'mobileinit', function(){ 
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar"; 


3); 


select 元 素 情况 比较 特殊 。 如 果 select 元 素 在 表单 当中 ， 上 例会 阻止 针对 页 面 中 select 元 素 的 
所 有 的 增强 行为 。 如 果 你 想 保持 菜单 本 身 的 外 观 与 表现 ， 行 为 ， 同 时 又 想 通 过 Jquery Mobile 
增强 select 的 按钮 的 视觉 外 观 ， 你 可 以 在 mobileinit 的 回调 函数 中 .mobile.nativeSelectMenu 设 
为 true 作 为 全 局 设置 或 者 在 每 个 元 素 上 逐个 使 用 data-native="true" 进 行 设 置 


动态 的 表单 布局 Dynamic form layout 
在 Jquery Mobile 中 ， 所 有 的 表单 元 素 都 被 设计 成 弹性 宽度 以 适应 不 同 移动 设备 的 屏幕 宽度 。 
在 Jquery Mobile 中 内 建 的 一 个 优化 就 是 根据 屏幕 宽度 的 不 同 ,label 和 表单 元 素 的 宽度 是 不 同 的 


如 果 屏 幕 宽度 相对 窄 (小 于 480px),label 元 素 会 被 样式 化 为 块 级 元 素 ， 使 他 们 能 够 置 于 表单 元 
素 上 方 ， 节 省 水 平 空间 


在 比较 宽 的 屏幕 上 ，label 和 表单 元 素 会 被 样式 化 为 两 列 的 网 格 布局 的 一 行 中 ， 充 分 利用 页 面 
的 空间 


表单 内 区 域 容器 ”Field containers 


我 们 建议 把 表单 内 的 每 一 个 label/ 表 单元 素 对 用 div 或 fieldset 容 器 包 衰 ， 然 后 增加 data- 
role="fieldcontain" 属 ?， 以 改善 标签 和 表单 元 素 在 宽屏 设备 中 的 样式 。Jquery Mobile 会 自动 在 
容器 底部 添加 一 条 细 边 框 作为 分 隔 线 ， 使 得 label/ 表 单元 素 对 在 快速 打 视 时 看 起 来 对 齐 


html 代 三 


<div data-role="fieldcontain"> 
...label/input code goes here... 
</div> 


刷新 表单 元 素 Refreshing form elements 


每 一 个 表单 组 件 都 有 刷新 方法 。 以 下 是 实例 
html 代 码 

复 选 按钮 

$("input[type='checkbox']").attr("checked", true).checkboxradio("refresh"); 
单 选 按钮 组 : 


$("input[type='radio']").attr("checked", true) .checkboxradio("refresh") ; 


选择 列表 :: 


var myselect = $("select#foo"); 
myselect[0].selectedIndex = 3; 
myselect.selectmenu("refresh"); 


滑动 条 


$("input[type=range]").val(60).slider("refresh"); 


FFX (they use slider): 


var myswitch = $("select#bar"); 
myswitch[0].selectedIndex = 1; 
myswitch .slider("refresh"); 
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表单 元 素 示 例 Form element gallery 

此 页 面包 含 了 通过 淅 进 增强 驱动 的 表单 元 素 。 原 生 的 表单 元 素 有 时 被 隐藏 了 ， 但 他 们 的 value 
值 被 保存 了 ， 所 以 表单 可 以 正确 的 提交 

不 支持 自 定义 组 件 的 浏览 器 也 能 使 用 它们 ， 因 为 所 有 表单 组 件 都 基于 原生 的 html 表 单元 素 . 
文本 输入 框 Text inputs 
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文本 输入 域 Textarea: 
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单 选 按钮 组 radiobox 


Cat 


Hampster 


Lizard 


列表 按钮 ?select 









Standard: 7 day 


Rush: 3 days 
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文本 输入 框 Text inputs 


文本 输入 框 和 文本 输入 域 使 用 标准 的 html 标 记 的 ， 然 后 Jquery Mobile 会 让 他 们 变 得 更 吸引 人 
而 且 易 于 触摸 使 用 


要 使 用 输入 标准 文字 的 输入 框 ， 给 input 增 加 type="text" 属 性 。 注 意 要 把 label 的 for 属 性 设 为 
input 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容 器 包 衰 它们， 并 给 他 设 定 data- 
role="fieldcontain" 属 性 


HTML 代码 : 


<div data-role="fieldcontain"> 

<label for="name">Text Input:</label> 

<input type="text" name="name" id="name" value="" /> 
</div> 


文本 输入 ?Text Input: 


aaa 


密码 输入 框 Password inputs 


给 input 设 置 type="password" 属 性 ， 可 以 设置 为 密码 框 ， 注 意 要 把 label 的 for 属 性 设 为 input 的 id 
值 ， 使 他 们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容 器 包 襄 它们， 并 给 他 设 定 data- 
role="fieldcontain" 属 性 


HTML 代码 : 


<div data-role="fieldcontain"> 

<label for="password">Password Input:</label> 

<input type="password" name="password" id="password" value="" /> 
</div> 


密码 输入 框 Password inputs 


其 他 的 标准 的 HTML5 输 入 框 类 型 More standard 
HTMLS input types 


在 Jquery Mobile 中 ， 你 可 以 使 用 新 的 HTML5 输 入 框 类 型 ， 比 如 email, tel, number, Jquery 
Mobile 会 把 某 些 类 型 的 输入 框 降级 为 普通 的 文字 输入 框 (目前 ?range 和 search) 。 你 可 以 在 
页 面 的 插件 选项 里 设置 ， 把 需要 的 input 类 型 降级 为 普通 的 文字 输入 框 


文本 域 Textareas 


对 于 多 行 输入 可 以 使 用 textarea 元 素 。Jquery Mobile 框 架 会 自动 加 大 文本 域 的 高 度 防 止 出 现在 
移动 设备 中 很 难 使 用 的 滚动 条 的 出 现 


注意 要 把 label 的 for 属 性 设 为 input 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容 器 包 囊 
它们 ， 并 给 他 设 定 data-role="fieldcontain" 属 性 


HTML 代码 : 


<div data-role="fieldcontain"> 

<label for="textarea">Textarea:</label> 

<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> 
</div> 


文本 域 Textareas 


aaa 


搜索 输入 框 Search inputs 


搜索 输入 框 是 一 个 新 兴 的 html 元 素 ， 外 观 为 圆 角 ， 当 你 输入 文字 后 右边 会 出 现 一 个 叉 的 图 标 ， 
点 击 则 会 清除 你 输入 的 内 容 。 给 input 增 加 type="search" 属性 来 定义 


注意 要 把 label 的 for 属 性 设 为 input 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容 器 包 右 
它们 ， 并 给 他 设 定 data-role="fieldcontain" 属 性 


HTML 代码 : 


<div data-role="fieldcontain"> 

<label for="search">Search Input:</label> 

<input type="search" name="password" id="Ssearch" value="" /> 
</div> 


搜索 输入 框 Search inputs 
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滑动 条 Slider 


给 input 的 设置 一 个 新 的 HTML5 属 性 为 type="range"， 可 以 给 页 面 添加 滑动 条 组 件 ， 可 以 指定 
它 的 value 值 (当前 值 ) ，min 和 max 属 性 的 值 配置 滑动 条 。Jquery Mobile 会 解析 这 些 属性 来 
配置 滑动 条 。 当 你 滑动 滑动 条 时 ，input 会 随 之 更 新 数值 ， 反 之 亦 然 ， 使 你 能 够 很 简单 的 在 表 
单 里 提交 数值 。 注 意 要 把 label 的 for 属 性 设 为 input 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 ， 并 且 
要 用 div 容 器 包 训 它们， 并 给 他 设 定 data-role='"fieldcontain" 属 性 


HTML 代码 : 


<div data-role="fieldcontain"> 

<label for="slider">Input slider:</label> 

<input type="range" name="Slider" id="slider" value="0" min="0" max="100" /> 
</div> 


滑动 条 Slider 





设置 min 和 max 属 性 的 值 你 可 以 配置 滑动 条 上 下 能 取 到 的 值 ， 而 value 值 是 用 来 指定 滑动 条 初始 
的 位 置 和 input 框 内 的 值 


滑动 杆 同样 对 键盘 有 响应 。 右 箭头 ， 上 箭头 ，Page Up 键 可 以 用 来 增加 当前 值 ， 左 箭头 ， 下 
箭头 Page Down 键 则 减少 当前 值 。Home 键 和 End 键 则 可 以 分 别 调 到 滑动 条 的 最 小 值 和 最 
大 值 


刷新 滑动 条 Refreshing a slider 
如 果 你 想 通过 js 手动 控制 滑动 条 ， 务 必 调 用 refresh 方法 刷新 滑动 条 的 样式 


$("input[type=range]").val(60).slider("refresh"); 


开关 Flip toggle switches 


开关 在 移动 设备 上 是 一 个 常用 的 ui 元 素 ， 用 来 二 元 的 切换 开 / 关 或 者 输入 true/false 类 型 的 数 
据 。 你 可 以 像 滑动 框 一 样 拖 动 开 关 ， 或 者 点 击 开关 任意 一 半 进 行 操作 


创建 一 个 只 有 2 个 option 的 选择 菜单 就 可 以 构造 一 个 开关 了 。 第 一 个 option 会 被 样式 化 为 F, 
第 二 个 option 会 被 样式 化 为 关 ， 所 以 请 注意 代码 书写 顺序 。 注 意 要 把 label 的 for 属 性 设 为 input 
的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 ， 并 且 要 用 div 容 器 包 衷 它们 ， 并 给 他 设 定 data- 
role="fieldcontain" 属 性 。 


HTML 代码 : 


<div data-role="fieldcontain"> 
<label for="slider">Select slider:</label> 
<select name="Slider" id="slider" data-role="slider"> 
<option value="o0ff">0ff</option> 
<option value="0n">0n</option> 
</select> 
</div> 


Ff ?Flip toggle switches 





Off 





刷新 开关 Refreshing a flip switch 


如 果 你 想 通 过 js 手动 控制 开关 ， 务 必 调 用 refresh 方法 刷新 样式 


var myswitch = $("select#bar"); 
myswitch[0].selectedIndex = 1; 
myswitch .slider("refresh"); 


复 选 按钮 Checkboxes 


复 选 框 用 来 提供 一 组 选项 ， 可 以 选中 不 止 一 个 选项 。 传 统 的 桌面 程序 的 单 选 按钮 组 没有 对 触 
摸 输入 的 方式 进行 优化 ， 所 以 在 Jquery Mobile 中 ，label 也 被 祥 式 化 为 复 选 按钮 ， 使 按钮 更 
长 ， 容 易 点 击 。 并 添加 了 自 定义 的 一 组 图 标 来 增强 视觉 反馈 。 


单 选 按钮 组 和 复 选 按钮 组 都 是 用 标准 的 html 代 码 写 的 ， 但 是 都 被 样式 化 得 更 容易 点 击 。 你 所 看 
见 的 控件 其 实 是 覆盖 在 input 上 的 label 元 素 ， 所 以 如 果 图 片 没 有 正确 加 载 ， 你 仍然 可 以 正常 使 
用 控件 。 在 大 多 数 浏览 器 里 ， 点 击 label 会 自动 触发 在 input 上 的 点 击 ， 但 是 我 们 不 得 不 为 部 分 

不 支持 该 特性 的 移动 浏览 器 人 工 去 触发 该 点 击 。 在 桌面 程序 里 ， 键 盘 和 屏幕 阅读 器 也 可 以 使 

用 这 些 控件 。 


要 创建 一 组 复 选 框 ， 为 input 添 加 type="checkbox" 属 性 和 相应 的 label 即 可 。 注 意 要 把 label 的 
for 属 性 设 为 input 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 。 


因为 复 选 按钮 使 用 label 元 素 放 置 checkbox 后 ， 用 来 显示 其 文本 ， 我 们 推荐 把 复 选 按钮 组 用 
fieldset 容 器 包 襄 ， 并 给 fieldset 容 器 内 增加 一 个 legend 元 素 ， 用 来 表示 该 问题 的 标题 。 


最 后 ， 还 需 将 fieldset 包 囊 在 有 data-role="controlgroup" 属 性 的 div 里 以 便于 将 该 组 元 素 和 文本 
框 ， 选 择 框 等 其 他 表单 元 素 同时 设置 样式 。 


HTML 代码 : 


<div data-role="fieldcontain"> 

<fieldset data-role="controlgroup"> 

<legend>Agree to the terms:</legend> 

<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> 
<label for="checkbox-1">I agree</label> 

</fieldset> 

</div> 


垂直 成 组 的 复 选 按钮 组 Vertically grouped 
checkboxes 


通常 情况 下 ， 复 选 按钮 组 会 置 于 标题 下 面 。 Jquery Mobile 会 自动 移 除 按钮 间 的 margin， 给 按 
钮 组 上 下 添加 圆 角 ， 使 得 单 选 按钮 组 看 起 来 为 一 个 整体 。 
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Cheetos 


w，Doritos 





4 Fritos 


Sun Chips 


水 平 的 复 选 按钮 组 Horizontal toggle sets 


复 选 按钮 组 也 可 用 作 复 选 的 水 平 按钮 组 ，, 可 以 同时 选择 多 个 按钮 。 比 如 说 文字 编辑 器 的 粗 体 ， 
RHF, 下 划 线 。 只 需要 为 fieldset 添 加 data-type="horizontal" 属 性 即 可 。 


<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> 


Jquery Mobile 会 自动 将 标签 浮动 ， 并 排放 置 ， 并 隐藏 复 选 按钮 的 icon, 并 给 左右 两 边 的 按钮 增 
me A. 


Refreshing a checkbox 


复 选 按钮 组 也 可 用 作 复 选 的 水 平 按钮 组 ，, 可 以 同时 选择 多 个 按钮 。 比 如 说 文字 编辑 器 的 粗 体 ， 
RHF, 下 划 线 。 只 需要 为 fieldset 添 加 data-type="horizontal" 属 性 即 可 。 


复 选 按钮 Checkboxes 88 


单 选 按钮 组 Radio buttons 


复 选 框 用 来 提供 一 组 选项 ， 可 以 选中 不 止 一 个 选项 。 传 统 的 桌面 程序 的 单 选 按钮 组 没有 对 触 
摸 输入 的 方式 进行 优化 ， 所 以 在 Jquery Mobile 中 ，label 也 被 祥 式 化 为 复 选 按钮 ， 使 按钮 更 
长 ， 容 易 点 击 。 并 添加 了 自 定义 的 一 组 图 标 来 增强 视觉 反馈 


单 选 按钮 组 和 复 选 按钮 组 都 是 用 标准 的 html 代 码 写 的 ， 但 是 都 被 样式 化 得 更 容易 点 击 。 你 所 看 

见 的 控件 其 实 是 履 盖 在 input 上 的 label 元 素 ? 所 以 如 果 图 片 没有 正确 加 载 ， 你 仍然 可 以 正常 使 用 

控件 。 在 大 多 数 浏 览 器 里 ， 点 击 label 会 自动 触发 在 input 上 的 点 击 ， 但 是 我 们 不 得 不 为 部 分 不 

支持 该 特性 的 移动 浏览 人 ae 在 桌面 程序 里 ， 键 盘 和 屏幕 阅读 器 也 可 以 使 用 
这 些 控件 


要 创建 一 组 复 选 框 ， 为 input 添 加 type="checkbox" 属 性 和 相应 的 label 即 可 。 注 意 要 把 label 的 
for 属 性 设 为 input 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 


为 复 选 按钮 使 用 label 元 素 放置 checkbox 后 ， 用 来 显示 其 文本 ， 我 们 推荐 把 复 选 按钮 组 用 
fieldset 容 器 包 衰 ， 并 给 fieldset 容 器 内 增加 一 个 legend 元 素 ， 用 来 表示 该 问题 的 标题 


ae 还 需 将 fieldset 包 应 在 有 data-role="controlgroup" 属 性 的 div 里 以 便于 将 该 组 元 素 和 文本 
框 ， 选 择 框 等 其 他 表单 元 素 同 时 设置 样式 ?p> 


HTML 代码 : 


<div data-role="fieldcontain"> 

<fieldset data-role="controlgroup"> 

<legend>Agree to the terms:</legend> 

<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> 
<label for="checkbox-1">I agree</label> 

</fieldset> 

</div> 


垂直 成 组 的 复 选 按钮 组 Vertically grouped 
checkboxes 


通常 情况 下 ， 复 选 按钮 组 会 置 于 标题 下 面 ,Jquery Mobile 会 自动 移 除 按钮 间 的 margin， 给 按钮 
组 上 下 添加 圆 角 ， 使 得 单 选 按钮 组 看 起 来 为 一 个 整体 


水 平 的 复 选 按钮 组 Horizontal toggle sets 


复 选 按钮 组 也 可 用 作 复 选 的 水 平 按钮 组 ，, 可 以 同时 选择 多 个 按钮 。 比 如 说 文字 编辑 器 的 粗 体 ， 
RHE, 下划线 。 只 需要 为 fieldset 添 加 data-type="horizontal" 属 性 即 可 


<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain"> 


Jquery Mobile 会 自动 将 标签 浮动 ， 并 排放 置 ， 并 隐藏 复 选 按 钮 的 icon, 并 给 左右 两 边 的 按钮 增 
WAA 


刷新 复 选 按钮 ”Refreshing a checkbox 
如 果 你 想 通 过 js 手动 控制 复 选 按钮 ， 务 必 调 用 refresh 方法 刷新 祥 式 


$("input[type='checkbox']").attr("checked", true).checkboxradio("refresh"); 


选择 菜单 Select menus 


选择 菜单 握 弃 了 原生 的 select 元 素 的 样式 ， 原 生 的 select 元 素 被 隐藏 ， 并 被 一 个 由 jquery 
mobile 框 架 自 定义 样式 的 按钮 和 菜单 替代 。 荣 单 是 ARIA 的 ( 即 Accessible Rich Internet 
Applications) 并 且 桌 面 电 脑 的 键盘 也 是 可 访问 的 。 


当 被 点 击 时 ， 手 机 自 带 的 原生 的 菜单 选择 器 会 打开 。 菜 单 内 某 个 值 被 选中 后 ， 自 定义 的 选择 
按钮 的 值 更 新 为 你 选择 的 那 一 个 。 


要 添加 这 样 的 选择 菜单 组 件 ， 使 用 标准 的 select 元 素 和 位 于 其 内 的 一 组 option 元 素 。 注 意 要 把 
label 的 for 属 性 设 为 select 的 id 值 ， 使 他 们 能 够 在 语义 上 相关 联 。 把 它们 包 右 在 data- 
role="fieldcontain" 的 div 里 面 进行 分 组 。 


框架 会 自动 找到 所 有 的 select 元 素 并 自动 把 他 们 增强 为 自 定 义 的 选择 菜单 。 
选择 菜单 Select menus 


<div data-role="fieldcontain"> 
<label for="select-choice-1" class="select">Choose shipping method:</label> 
<select name="select-choice-1" id="select-choice-1i"> 
<option value="standard">Standard: 7 day</option> 
<option value="rush">Rush: 3 days</option> 
<option value="express">Express: next day</option> 
<option value="overnight">Overnight</option> 
</select> 
</div> 


选择 菜单 Select menus 






Standard: 7 day 







Rush: 3 days 


Express: next day 


Overnight 





Express: next day © 











注意 : 原生 的 选择 菜单 不 能 通过 multiple="multiple" 属性 进行 多 项 选择 ， 如 果 你 有 这 个 需求 ， 
我 们 建议 使 用 自 定义 菜单 。 


使 用 自 定义 菜单 的 选项 Option to use custom menus 


你 可 以 自己 选择 使 用 自 定义 样式 的 选择 菜单 ， 而 不 是 原生 的 。 这 样 可 以 给 菜单 定义 主题 ， 使 
你 的 网 站 在 视觉 和 体验 上 更 加 出 色 ， 而 且 在 跨 平台 时 也 能 够 保持 一 致 性 。 并 且 ， 他 提供 了 对 
菜单 的 多 项 选择 ， 并 且 修 复 了 某 些 平台 缺失 的 功能 ， 比 如 Android 对 于 optgroup 的 支持 ， 并 且 
增加 了 一 种 优雅 的 方式 来 处 理 占 位 符 值 。 〈 下 面 会 解释 ) 。 最 后 ， 自 定义 的 菜单 在 桌面 电脑 
浏览 器 上 视觉 上 会 更 出 色 ， 因 为 原生 的 菜单 在 桌面 电脑 上 看 上 去 比 移动 设备 上 要 小 一 些 ， 那 
如 果 你 的 项 目 主要 面 对 桌 面 用 户 的 话 ， 那 视觉 上 就 有 点 奇怪 了 。 


注意 ， 把 原生 菜单 解析 为 自 定义 菜单 的 话 会 有 性 能 开销 。 如 果 你 页 面 里 面 有 很 多 选择 菜 
单 ，， 或 者 某 个 菜单 有 很 多 选项 ， 就 会 影响 页 面 性 能 ， 所 以 我 们 的 建议 是 不 要 滥用 自 定义 菜 
单 。 


给 菜单 添加 data-native-menu="false" 属 性 ， 就 可 以 把 菜单 转 为 自 定义 菜单 。 或 者 ， 在 页 面 的 
mobileinit 事 件 的 回调 函数 中 将 选择 菜单 的 nativeMenu 设 为 false 也 可 以 达到 相同 的 效果 。 这 闻 
会 在 全 局 把 所 有 的 选择 菜单 都 默认 设 为 自 定义 菜单 。 以 下 代码 必须 在 jQuery 加 载 后 且 jQuery 
Mobile 加 载 前 添加 : 


$(document).bind('mobileinit', function(){ 
$.mobile.selectmenu.prototype.options.nativeMenu = false; 


3); 


如 果菜 单 的 选项 不 多 的 话 ， 会 以 小 弹出 框 的 形式 和 动画 出 现 。 






Standard: 7 day 


Rush: 3 days 


Express: next day 


Overnight 


如 果 选 择 菜单 太 多 的 选项 而 不 能 显示 在 屏幕 中 ， 框 架 会 自动 创建 一 个 新 "page"， 表 现 为 一 个 
标准 的 列表 ， 包 含 了 所 有 的 选项 。 使 我 们 能 通过 设备 原生 的 滚动 条 在 很 长 的 一 个 列表 内 选择 
所 有 的 选项 。 页 面 的 标题 就 是 label 的 文本 。 





占 位 符 选 项 Placeholder options 
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。 没 有 值 的 option (或 者 一 个 空 值 属性 ) 
。 没 有 文本 节点 的 option 


。 带 有 data-placeholder="true" 属 性 的 option。 (使 你 将 带 有 值 以 及 文本 节点 的 选项 用 来 作为 占 
位 符 。) 


你 可 以 通过 插件 的 hidePlaceholderMenultems 选项 禁用 该 特性 ， 方 法 如 下 : 


$.mobile.selectmenu.prototype.options.hidePlaceholderMenuItems = false; 


禁用 选项 Disabled options 


jQuery Mobile 会 把 带 有 disabled 属性 的 选项 禁用 并 且 在 样式 上 标记 。 


在 下 面 的 实例 中 ， 第 二 个 选项 "Rush: 3 days" 被 设置 为 禁用 : 


Standard: 7 day 


Express: next day 


Overnight 





对 于 选项 组 的 支持 Optgroup support 


如 果 一 个 选择 菜单 包含 optgroup 元 素 ，jQuery Mobile 会 根据 label 的 文本 创建 一 个 分 割 项 的 选 


项 : 


© 
CD 
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USPS 


Standard: 7 day 
Rush: 3 days 


Express: next day 


Overnight 


First Overnight 
Express Saver 


Ground 





多 项 选择 Multiple selects 


如 果 给 你 的 选单 加 入 multiple 属性 ，jQuery Mobile 通 过 一 系列 的 方式 来 增强 元 素 : 
“菜单 里 面 会 创建 一 个 header 元 素 并 在 占 位 符 文本 旁边 显示 一 个 关闭 按钮 。 

。 点 击 选项 时 不 会 关闭 弹出 菜单 。 

“选项 旁边 会 出 现 类 似 checkbox 的 图 标 。 

“超过 2 项 被 选择 时 会 在 选择 按钮 里 出 现 一 个 表示 当前 选项 数目 的 气泡 。 


。 选 择 的 各 项 文本 会 在 按钮 里 变 成 一 行 用 逗号 分 隔 的 文本 。 如 果 按 钮 不 够 宽 ， 多 余 的 部 分 则 会 
变 成 省 略 号 。 


。 如果 没有 选项 被 选择 ， 按 钮 文本 会 保持 占 位 符 的 文本 


。 如 果 占 位 符 元 素 不 存在 ， 默 认 按 钮 文本 会 是 空白 的 ，header 也 仅仅 显示 一 个 关闭 按钮 。 因 为 
这 不 是 友好 的 用 户 体验 ， 我 们 建议 你 在 使 用 多 选 菜单 时 总 是 指定 一 个 占 位 符 元 素 。。 


q4 
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© Choose options | 


Standard: 7 day 


Rush: 3 days 


Express: next day 





Overnight 


当选 项 太 多 以 至 于 菜单 会 在 一 个 新 的 页 面 出 现时 ， 占 位 符 文 本 会 在 没有 选项 是 显示 在 按钮 
中 ，label 文 本 会 在 菜单 的 header 中 显示 。 这 与 小 对 话 框 式 的 选择 菜单 不 同 的 ， 小 对 话 框 式 的 
选择 菜单 的 占 位 符 文本 会 同时 显示 在 按钮 和 header 中 。 


Data 属性 的 支持 Data attribute support 


你 可 以 对 select 指 定 jqmobile 的 针对 button 的 data- 属性 。 例 如 : 我 们 给 下 面 的 例子 添加 了 
theme, icon and inline 属性 。 


Delete user 党 


刷新 选择 菜单 Refreshing a select 
如 果 你 通过 js 操作 了 选择 菜单 ， 务 必 通过 refresh 方法 来 更 新 他 的 样式 。 


var myselect = $("select#foo"); 
myselect[0].selectedIndex = 3; 
myselect.selectmenu("refresh"); 


tin SF Æ% Colart manic OF 
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表单 的 主题 样式 Form themes 


Jquery Mobile 内 建 了 一 套 样式 主题 系统 ， 让 你 给 页 面 和 表单 添加 样式 时 有 丰富 的 选择 。 默 认 
情况 下 所 有 的 表单 元 素 都 会 应 用 与 父 容器 相同 的 主题 样式 。 是 的 表单 元 素 融 合 进 他 们 的 布局 
中 。 给 表单 元 素 单 独 地 应 用 data-theme 属性 ， 可 以 指定 它 的 主题 样式 ， 使 他 在 布局 中 凸现 出 


下 面 实例 中 的 所 有 表单 的 html 都 是 相同 的 ， 并 且 没 有 为 表单 内 的 元 素 单独 地 指定 主题 样式 。 表 
单 之 间 唯 一 的 不 同 就 是 给 表单 父 容器 通过 data-theme 属性 指定 了 不 同 的 主题 样式 。 这 表现 了 
表单 元 素 自动 应 用 父 容器 的 主题 样式 的 特性 


BODY 为 A 主题 


Text Input: 


Flip switch: 


Slider: AO 


Font styling: mu i 


Choose a 
pet: 


Cat 


Hamster 


Lizard 


Choose 
shipping 
method: Standard: 7 day 





BODY 为 B 主 题 
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Text Input: aaa 


Slider: | 
(40 | SS 


4 





Flip switch: 








Choose a Cat 
pet: 
e Dog 

Hamster 

Lizard 
Choose 
shipping 
method: Standard: 7 day ~ 

BODY 为 C 主 题 


表单 的 主题 样式 Form themes 
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Lizard 


Standard: 7 day © 








BODY 为 D 主 题 








表单 的 主题 样式 Form themes 
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Lizard 


Standard: 7 day © 








BODY 为 E 主 题 








表单 的 主题 样式 Form themes 
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Text Input: 










Flip switch: 
Slider: 





Font styling: 


表单 的 主题 样式 Form themes 
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ajax 的 表单 提交 Ajax form submission 


Jquery Mobile 会 自动 通过 ajax 义理 表单 的 提交 ， 并 在 表单 页 面 和 结果 页 面 之 间 创 建 一 个 平滑 
的 转 场 效果 。 注 意 请 在 form 元 素 上 正确 设 定 action 和 method 属 性 ， 保 证 表单 的 提交 。 如 果 没 
有 指定 ， 提 交 方 法 默认 为 get,action 默 认为 当前 页 的 相对 路 径 (通过 $.mobile.path.get() 方 法 取 
得 

表单 也 可 以 像 链 接 一 样 指定 转 场 效果 的 属性 ， 上 比如 data-transition="pop"， 和 data- 
direction="reverse". 如 果 不 希 望 通过 ajax 提交 表单 ， 可 以 在 全 局 事件 禁用 ajax， 或 给 form 设 定 
data-ajax="false" 属性 。target 属性 也 可 以 在 form 上 设置 ， 表 单 提交 时 默认 为 浏览 器 的 打开 规 
则 。。 而 与 链接 不 同 ，rel 属性 不 可 以 在 form 上 设 


非 ajax 的 处 理 Non-Ajax handling 


要 防止 表单 提交 时 自动 通过 ajax 提交 ， 给 form 元 素 增 加 data-ajax="false" 属 性 。 也 可 以 通过 
ajaxFormsEnabled 方 法 在 全 局 控制 . 


Simple Ajax form example 


本 页 面 展示 了 表单 自动 通过 ajax 义理 的 提交 。 下 面 的 表单 采用 常规 (get 方式 提交 ) forms- 

sample-response.php 。 在 提交 时 ，Jquery Mobile 会 确保 指定 的 Url 地 址 可 以 通过 Ajax 获取 ， 

并 且 适 当 的 处 理 。 请 注意 ， 就 像 普通 的 HTTP 请 求 表单 提交 一 样 ，Jquery Mobile 人 允许 通过 get 
请 求 成 功 得 到 的 结果 页 通过 更 新 Url 的 哈 希 值 被 添加 为 收藏 页 。 而 就 像 普 通 的 表单 提交 一 样 ， 

post 请 求 不 包含 查询 参数 ， 因 此 结果 页 不 能 被 添加 为 收藏 页 


表单 插件 的 方法 Form Plugin Methods 


在 将 jquery mobile 对 表单 控件 进行 自 定 义 增强 之 后 ， 你 依然 可 以 通过 插件 的 方法 手动 的 控制 他 
们 的 许多 属性 。 当 前 可 用 的 方法 已 经 列举 在 下 面 。 你 可 以 查看 Github 上 的 项 目 来 检查 更 新 ， 
我 们 正在 努力 完成 中 


选择 菜单 Select menus 
open 打开 一 个 选择 菜单 
$('select').selectmenu('open'); 
close 关闭 一 个 选择 菜单 


$('select').selectmenu('close'); 


refresh: 更 新 自 定义 菜单 来 体现 原生 元 素 的 值 。 如 果 自 定义 菜单 的 选项 数目 和 原生 的 select 元 素 option 的 数目 不 一 村 


// 刷 新 选择 菜单 的 ? 
$('select').selectmenu('refresh'); 


// 刷 新 选择 菜单 的 值 并 重建 菜单 


$('select').selectmenu('refresh', true); 


enable: 启用 该 选择 菜单 
$('select').selectmenu('enable'); 


disable: 禁用 该 选择 菜单 ， 
$('select').selectmenu('disable'); 


eee 


文本 框 Textinput 





enable: 启用 文本 域 
$('input').textinput('enable'); 


disable: 禁用 文本 域 
$('textarea').textinput('disable'); 


% 3% S 34 HE checkboxradio 


enable: 启用 单 选 复 选 框 . 
$('input').checkboxradio('enable'); 


disable: 禁用 单 选 复 选 框 , 
$('input').checkboxradio( 'disable'); 


refresh: 刷新 单 选 复 选 框 的 值 


$('input').checkboxradio('refresh'); 


滑动 条 slider 


enable: 启用 滑动 
$('input').slider('enable'); 


disable: 禁用 滑动 
$('input').slider('disable'); 


refresh: 刷新 滑动 条 的 
$('input').slider('refresh'); 


表单 按钮 Form buttons 


enable: 启用 按钮 ， 
$('input').button('enable'); 


disable: 禁用 按钮 
$('input').button('disable'); 


降级 的 表单 输入 框 元 素 Degraded Form Input Types 


Jquery Mobile 在 应 用 了 增强 效果 之 后 ， 会 把 几 种 html5 输 入 框 类 型 降级 为 了 type=text 或 者 
type=number 的 输入 框 类 型 。 例 如 ，type=range 的 输入 框 被 增强 成 为 一 个 滑动 条 ， 类 型 被 设置 
为 数字 ， 而 type=search 的 输入 框 在 我 们 添加 了 一 些 针对 搜索 输入 文字 的 样式 后 会 降级 为 
type=text 输 入 框 


页 面 插件 包含 一 组 input 的 类 型 ， 这 些 input 的 类 型 可 以 设置 为 ttue， 这 意味 着 它们 会 降级 成 
type=text 输 入 框 ， 或 者 false， 意 味 着 不 处 理 ， 或 者 一 个 字符 串 比 如 "number， 意 为 将 他 们 转 
化 为 该 类 型 


你 可 以 配置 哪些 类 型 可 以 通过 页 面 插件 degradelnputs 选 项 来 改变 ， 而 哪 一 些 是 需要 通过 
$.mobile.page.prototype.options.degradelnputs 在 外 部 手动 操作 ， 其 中 以 下 type 可 以 使 用 
color, date, datetime, "datetime-local", email, month, number, range, search, tel, time, url, 
week. 请 务必 在 mobileinit 事件 的 处 理 范 数 里 配置 这 些 选项 ， 以 便于 在 加 载 第 一 个 页 面 以 及 后 
续 页 面 都 能 应 用 这 些 选项 


Jquery UI 的 移动 版 日 期 拾取 器 插件 Jquery Ul's 
Datepicker Styled for mobile 

下 面 这 个 示例 是 Jquery U 为 移动 设备 开发 的 日 期 拾取 器 插件 ， 这 个 插件 并 不 包含 在 Jquery 
Mobile 默 认 库 当中 ， 你 需要 自己 手动 include 这 些 文件 


日 期 拾取 器 Datepicker 


Date Input: 
04/01/2011 
April 2011 

EE: 
3 4 5 6 7 8 9 
10 11 12 13 14 15 16 
17 18 19 20 21 22 23 
24 25 26 raf 28 29 30 


使 用 说 明 Usage Instructions 


日 期 拾取 器 自动 从 type="date" 属 性 的 输入 框 中 生成 


<label for="date">Date Input:</label> 
<input type="date" name="date" id="date" value="" /> 


我 们 推荐 将 label 和 input 包 应 在 data-role=fieldcontain 的 div 中 作为 描述 ， 而 且 这 些 元 素 应 该 添 
加 form 中 以 便 在 C 级 浏览 器 也 能 够 正常 访问 


注意 : 该 插件 并 不 包含 在 Jquery Mobile 默 认 库 当中 ， 你 需要 包含 以 下 文件 来 使 用 该 插件 : 


<link rel="stylesheet" href="Jquery.ui.datepicker.mobile.css" /> 
<script src="Jquery.ui.datepicker.js"></script> 
<script src="Jquery.ui.datepicker.mobile.js"></script> 


你 同样 可 能 需要 配置 页 面 插件 来 使 "date" input 转换 为 "text" input 以 避免 原生 "date" inputs & 
们 自 定义 的 datepicker 所 冲突 ， 要 实现 这 样 的 功能 需要 在 "mobileinit" 事 件 处 理 汞 数 中 使 用 如 下 
代码 : 


<script> 
//reset type=date inputs to text 
$( document ).bind( "mobileinit", function(){ 
$.mobile.page.prototype.options.degradeInputs.date = true; 


}); 


</script> 


把 这 些 代 码 放 置 在 在 Jquery 加 载 后 ，Jquery Mobile 加 载 前 。 你 可 以 查看 该 页 面 的 源 代 码 是 如 
何 写 的 


列表 List views 


列表 用 来 展示 数据 ， 导 航 ， 结 果 列 表 以 及 列表 标记 的 规约 数据 条 目 ， 所 以 Jquery Mobile 提 供 
了 多 种 的 列表 类 型 以 适应 大 多 数 的 设计 模式 。 


列表 标记 的 规约 List markup conventions 


1. 基 本 的 带 连接 的 列表 Basic linked list 


列表 的 代码 为 一 个 售 data-role="listview" 属性 无 序列 表 ul。Jquery Mobile 会 把 所 有 必要 的 样 
式 ( 列 表 项 右 出 现 一 个 向 右 箭 头 ， 并 使 列表 与 屏幕 同 宽 等 ) 应 用 在 列表 上 ， 使 其 成 为 易于 触摸 的 
控件 。 当 你 点 击 列表 项 时 ，Jquery Mobile 会 触发 该 列表 项 里 的 第 一 个 链接 ， 通 过 ajax 请 求 链 
接 的 URL 地 址 ， 在 DOM 中 创建 一 个 新 的 页 面 并 产生 页 面 转 场 效果 。 


html 代 码 


<ul data-role="listview"> 
<li><a href="index.html">Acura</a></1i> 
<li><a href="index.htm1">Audi</a></1i> 
</ul> 


效果 图 : 
Audi 


BMW 


2.frRE BY FI FIZ Nested list 


通过 “uP “PRIR REF ul ，ol 你 可 以 创建 族 套 列表 。 当 一 个 拥有 子 列 表 的 列表 项 被 点 击 时 ， 
Jquery Mobile 框 架 会 生成 一 个 新 的 ul 页 面 充 满 屏幕 ， 并 自动 生成 一 个 为 父 列 表 项 名 称 为 标题 
的 headenr 以 及 一 个 子 列表 。 这 个 动态 生成 的 能 套 的 列表 默认 的 主题 样式 b"( 蓝 色 )， 提 示 你 是 
在 二 级 菜单 里 。 列 表 可 以 伐 套 多 层 ，Jquery Mobile 会 自动 处 理 这 些 链 接 和 页 面 。 


html 代 码 


<ul> 
<li>Pets 
<ul> 
<li><a href="index.html">Canary</a></li> 
<li><a href="index.html">Cat</a></1i> 
</ul> 
</li> 
<li>Farm animals 
<ul> 
<li><a href="index.htmlL">Chicken</a></1i> 
<li><a href="index.html">Cow</a></1i> 
</ul> 
</li> 
</ul> 


效果 图 : 


Animals 
All your favorites from aarkvarks to zebras. 


Colors 
Fresh colors from the magic rainbow. 


3. 数 字 排 序 的 列表 Numbered list 


通过 有 序列 表 ol 可 以 创建 数字 排序 的 列表 用 来 表现 顺序 序列 比如 说 搜索 结果 或 者 电影 排行 榜 时 
非常 有 用 。 当 增强 效果 应 用 到 列表 时 ，Jquery Mobile 优 先 使 用 css 的 方式 给 列表 添加 编号 ， 当 
浏览 器 不 支持 这 种 方式 时 ， 框 架 会 采用 JavaScript 将 编号 写 入 列表 中 。 


html 代 码 


<ol data-role="listview"> 
<li><a href="index.html">The Godfather</a></1i> 
<li><a href="index.html">Inception</a></1i> 
</ol> 


效果 图 : 
1.The Godfather 
2. Inception 


3. The Good, the Bad and the Ugly 


4. 只 读 列 表 Read-only list 


列表 也 可 以 用 来 展示 没有 交互 的 条 目 ， 通 常会 是 一 个 内 嵌 的 列表 。 通 过 有 序 或 者 无 序列 表 都 
可 以 创建 只 读 列表 ， 列 表 项 内 没有 链接 即 可 ，Jqmobil 默 认 将 他 们 的 主题 样式 为 “c" 白 色 无 渐变 
色 ， 并 把 字号 设 为 比 可 点 击 的 列表 项 的 小 ， 以 节省 空间 。 


html 代 码 


<ul data-role="listview" data-inset="true"> 
<1i>Acura</1i> 
<1i>Audi</1li> 

</ul> 


效果 图 : 


Acura 


Audi 


5. 拆 分 的 按钮 列表 Split button lists 


有 时 每 个 列表 项 会 有 多 于 一 个 操作 ， 这 时 拆 分 按钮 用 来 提供 2 个 独立 的 可 点 击 的 部 分 : 列表 项 
本 身 和 列表 项 右边 的 小 icon。 要 创建 这 种 拆 分 按钮 ， 在 li 插入 第 二 个 链接 即 可 ， 框 架 会 创建 一 
个 坚 直 的 分 割 线 ， 并 把 链接 样式 化 为 一 个 只 有 icon 的 按钮 ， 记 得 设置 title 属 性 以 保证 可 访问 
性 。 


你 可 以 通过 指定 data-split-icon 属 性 来 设置 位 于 右边 的 分 隔 项 的 图 标 (图 标 详情 参见 图 标 ? 分 
隔 项 的 主题 样式 可 以 通过 data-split-theme 属 性 来 设置 。 


html 代 码 


<ul data-role="listview" data-split-icon="gear" data-split-theme="d"> 
<li> 
<img src="images/album-bb.jpg" /> 
<h3><a href="index.html">Broken Bells</a></h3> 
<p>Broken Bells</p> 
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purché 
</li> 
<li> 
<img src="images/album-hc.jpg" /> 
<h3><a href="index.html">Warning</a></h3> 
<p>Hot Chip</p> 
<a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purché 
</li> 


</ul> 


E 





+] 


效果 图 : 


Broken Bells 
Broken Bells 





Te | 
a È Warning 
Got, Dy Hot Chip 


6. 列 表 分 割 项 List dividers 
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列表 项 也 可 以 转化 为 列表 分 割 项 ， 用 来 组 织 列表 ， 使 列表 项 成 组 。 给 任意 列表 项 添加 data- 
role="list-divider" 属性 即 可 。 默 认 情 况 下 列表 项 的 主题 样式 为 “<b* 浅 灰 )， 但 给 列表 (uzo) 添 
加 data-dividertheme 属性 可 以 设置 列表 分 割 项 的 主题 样式 。 


html 代 码 


<ul data-role="listview"> 
<li data-role="list-divider">A</1i> 
<li><a href="index.html">Adam Kinkaid</a></1i> 
<li><a href="index.html">Alex Wickerham</a></1i> 
<li><a href="index.html">Avery Johnson</a></1li> 
<li data-role="list-divider">B</1i> 
<li><a href="index.html">Bob Cabot</a></1li> 


</ul> 

效果 图 : 
Adam Kinkaid © 
Alex Wickerham E 
Avery Johnson g? 
Bob Cabot E 


7. 搜 索 过 滤 框 Search filter 


Jquery Mobile 提 供 了 一 种 非常 方便 的 方式 通过 在 客户 端 进行 的 搜索 机 制 过 滤 列 表 。 要 使 一 个 
列表 可 过 滤 ， 只 需 为 列表 设置 data-filter="true" 属性 即 可 。 框 架 会 在 列表 上 方 增加 一 个 搜索 
框 ， 当 用 户 在 搜索 输入 框 中 输入 时 ，Jquery Mobile 会 自动 过 滤 掉 不 含 输入 字符 的 列表 项 。 


搜索 输入 框 默认 的 字符 为 "Filter items...". 通 过 设置 mobileinit 事 件 的 绑 定 程序 或 者 给 
$.mobile.listview.prototype.options.filterPlaceholder 选项 设置 一 个 字符 串 ， 或 者 给 列表 设置 
data-filter-placeholder 属 性 ， 可 以 设置 搜索 输入 框 的 默认 字符 。 


html 代 码 


<ul data-role="listview" data-filter="true" > 
<li><a href="index.html1">Acura</a></1i> 
<li><a href="index.html">Audi</a></1li> 
</ul> 


效果 图 : 
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8. 文 本 格式 和 计数 气泡 Text formatting & counts 


Jquery Mobile 支 持 通过 HTML 语 义 化 的 标签 来 显示 列表 项 中 所 需 常 见 的 文本 格式 〈 比 如 标题 / 
描述 ， 二 级 信息 ， 计 数 等 ) 


e。。 将 数字 用 一 个 元 素 包 囊 ， 并 添加 ui-li-count 的 class, 放 置 于 列表 项 内 ， 可 以 给 列表 项 右 侧 
增加 一 个 计数 气泡 


* 要 添加 有 层次 关系 的 文本 可 以 使 用 标题 来 强调 ， 用 段落 文本 来 减少 强调 


。。 补 充 信息 (比如 日 期 ) 可 以 通过 包 襄 在 class="ui-li-aside" 的 容器 中 来 添加 到 列表 项 的 右 
AM 


html 代 码 


<ul data-role="listview"> 
<li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span> 
<li> 
<h3><a href="index.html">Stephen Weber</a></h3> 
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong><, 
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the Jc 
<p class="ui-li-aside"><strong>6:24</strong>PM</p> 
</li> 
<li> 
<h3><a href="index.html">Jquery Team</a></h3> 
<p><strong>Boston Conference Planning</strong></p> 
<p>In preparation for the upcoming conference in Boston, we need to start gathering :# 
<p class="ui-li-aside"><strong>9:18</strong>AM</p> 
</li> 
</ul> 


EE) 





效果 图 : 
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Friday, October 8, 2010 [2 | 


Stephen Weber 6:24PM 


You've been invited to a meeting at Filament Group in Boston, MA 
Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQ... 





jQuery Team 9:18AM 


Boston Conference Planning 
In preparation for the upcoming conference in Boston, we need to start gathering... 


html 代 码 


<ul data-role="listview"> 
<li><a href="index.html">Inbox</a> <span class="ui-1i-count">12</span></1i> 
<li><a href="index.html">Outbox</a> <span class="ui-1i-count">0</span></1i> 
</ul> 


效果 图 : 
Inbox 2 © 
Outbox 0 © 


9. 列 表 项 的 缩 上 略图 与 图 标 Thumbnails & icons 


要 在 列表 项 左 侧 添加 缩 略图 ， 只 需 在 列表 项 中 添加 一 幅 图 片 作为 第 一 个 子 元 素 即 可 。Jquery 
Mobile 会 自动 缩放 图 片 为 大 小 80px 的 正方 形 ， 而 要 使 用 标准 ?6*16 的 图 标 作为 缩 略图 的 话 ， 为 


片 元 素 添 加 ui-li-icon class 即 可 


html 代 码 


<ul data-role="listview"> 
<li> 
<img src="images/album-bb.jpg" /> 
<h3><a href="index.html">Broken Bells</a></h3> 
<p>Broken Bells</p> 
</li> 
<li> 
<img src="images/album-hc.jpg" /> 
<h3><a href="index.html">Warning</a></h3> 
<p>Hot Chip</p> 
</li> 
</ul> 


效果 图 : 
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Broken Bells 





Broken Bells 
a 
N ; 
yA Warning 
Dor yh Hot Chip © 
TRAY 
html 代 码 


<ul data-role="listview"> 
<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">Franc 
<li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Ger1 
</ul> 


rT — 
效果 图 : 





ii France 4 © 


Germany 1) © 


10. ABR AFIF Inset lists 
如 果 列 表 需 要 典 入 在 有 其 他 内 容 的 页 面 中 ， 内 铸 列 表 会 将 列表 设 为 边缘 圆 角 ， 周 围 留 有 magin 
的 块 级 元 素 。 给 列表 (ul 或 of) 添加 data-inset="true" 属 性 即 可 


html 代 码 


<ul data-role="listview" data-filter="true" > 
<li><a href="index.html">Acura</a></1i> 
<li><a href="index.html">Audi</a></1i> 


</ul> 
效果 图 : 

Inbox 12) © 
Outbox 0) © 


更 新 列表 Updating lists 


如 果 你 给 列表 项 添加 了 列表 项 ， 你 需要 调用 refresh() 方 法 将 列表 的 样式 更 新 并 且 将 添加 进 的 列 
表 项 生成 藤 套 列表 。 例 如 : $('ul’).listview('refresh’); 


我 们 目前 正在 改进 refresh 方 法 ， 所 以 请 关注 Github。 


